试图调整我的 <h1> 和 <p> 我图像左侧的元素

Question

Im trying to align my title, image and paragraph to the left of my news image.

And Im using float left for doing this but its not working,

Im having this:

But Im trying this:

Do you see where might be the problem?

My fiddle with the problem Im having:

http://jsfiddle.net/upH4U/1/

My html:

<div id="news-content">
    <h1>News</h1>
    <article id="loop-news">
        <div class="img_container">
            <img src="../image1.jpg" title=""/> 
        </div>
        <h2><a href="#" >Title of the news</a><br /></h2>
        <span id="date">Tuesday, May, 2014</span>
        <p>
            This is my paragraph and I want to align it to left of my image.
            <a href="#">see more</a>
        </p>  
    </article>

    <article id="loop-news">
        <div class="img_container">
            <img src="../image1.jpg" title=""/> 
        </div>
        <h2><a href="#" >Title of the news</a><br /></h2>
        <span id="date">Tuesday, May, 2014</span>
        <p>
            This is my paragraph and I want to align it to left of my image.
            <a href="#">see more</a>
        </p>  
    </article>
</div>

My css:

#news-content
{
    float:left;
    width:480px;
    background:#f3f3f3;
}

#news-content h1
{
    font-size:20px;
    font-weight:100;
    margin-bottom:10px;
    color:gray;
    text-align:left;
}

#loop-news
{
    width:400px;
    margin-bottom:10px; 
    text-align:center;
}

.img_container
{
    width:160px;
    height: 165px;
    float:left;
    cursor: pointer;
    border:3px solid #ccc; 
}

#loop-news h2 a
{
    font-size:20px;  
    color:#3B5998; 
    text-decoration:none;
    margin:0 auto 0 5px;
    font-weight:100;
    float:left;
}

#loop-news a
{
    font-size:14px; 
    text-decoration:none;
    margin-left:2px;
}

#loop-news #date
{
    font-size:13px; 
    font-weight:normal;
    color:#7a7a7a;  
}

#loop-news p
{
    font-size: 13px;  
    text-align:justify; 
    line-height:25px;
    word-spacing:-2px;
    width:300px;
    float:left;
    margin-left:5px;
}

Answer 1

quick answer, use clearfix - there are a few options there

CSS

#loop-news
{
    width:400px;
    /*margin-bottom:10px; moving margin to seperator*/
    /*text-align:center;*/
}

#loop-news p
{
    font-size: 13px;  
    /*text-align:justify; 
    line-height:25px;
    word-spacing:-2px;
    width:300px;
    float:left;*/
    margin-left:5px;
}

#loop-news {
    overflow:hidden; /*quick clear fix*/
}

.loop-news-content {
    overflow:hidden;
}

#loop-news *:first-child { margin-top:0; }
#loop-news *:last-child { margin-bottom:0; }

#loop-news h2 { margin:0; }
.loop-news-meta { margin-top:0; }

Heres the updated fiddle http://jsfiddle.net/Varinder/HTNk8/2/

Answer 2

这是一个显示如何将文本与图像对齐的页面： http ： //www.w3schools.com/tags/att_img_align.asp

Answer 3

You need to clear your float by adding clear:left; to the same class that uses float: left . In your case, you can use the CSS declaration:

#news-content article { clear: left; }

Also, having multiple elements with the same ID can have unexpected results. You should consider using classes instead .

Answer 4

your width is overflow; dont use it or fix it

    #loop-news p
{
    font-size: 13px;  
    text-align:justify; 
    line-height:25px;
    word-spacing:-2px;
    float:left;
    margin-left:5px;
}

Answer 5

将图像漂浮到右侧，就像这个小提琴一样

float:right;