html - 尝试将我的

Question

我试图将我的标题、图像和段落与新闻图像的左侧对齐。

我使用 float left 来执行此操作，但它不起作用，

我有这个:

但我正在尝试这个:

您知道问题出在哪里吗？

我对我遇到的问题的摆弄:

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

我的 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>

我的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

快速回答，使用 clearfix - 有几个 options那里

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; }

这是更新后的 fiddle http://jsfiddle.net/Varinder/HTNk8/2/