尝试对齐我图像左侧的<h1>和<p>元素</p> </h1>

Question

我试图将我的标题，图片和段落对齐到新闻图片的左侧。

我使用浮动左手来做这个，但它没有用，

我有这个：

但我试着这个：

你知道问题出在哪里吗？

我的问题是我有：

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

继承人更新的小提琴 http://jsfiddle.net/Varinder/HTNk8/2/

Answer 2

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

Answer 3

您需要通过将clear:left;添加到使用float: left的同一个班级来清除您的浮动广告。在您的情况下，您可以使用CSS声明：

#news-content article { clear: left; }

此外，multiple elements with the same ID可能会产生意外结果。你应该consider using classes instead。

Answer 4

你的宽度溢出;不要使用它或修复它

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

Answer 5

将图像浮动到右侧，如this fiddle

float:right;