Question

我有这个布局我在工作，在帖子部分（它就像一个博客），我希望它看起来像这样（忽略图像/样式的微妙差异，这是取自PSD）：

enter image description here

所以我尝试对它进行编码，将新闻帖子的特色图像设置为向左浮动，因为我希望帖子描述恰好位于其右侧。 img设置为300px作为标准，高度意味着根据特色图像的不同而变化。对于标签部分，它有自己的div。

所以我试着对它进行编码，由于某种原因，特色图像从其容器div中流出，现在与标记div（see the actual page here）重叠。看看它下方的标签div是如何放置的？这是我的问题。我希望标签div在特色图像下面有自己的行。我不知道为什么图像会从它的div中消失。

（我刚刚发布相关领域，因为这是我遇到问题的唯一部分）：

<div id="newsmain">

                        <div id="titlearea">

                            <div class="comment_bubble">

                                <a href="">9</a>

                            </div>

                                <span class="post_titles"><a href="">Colored Prototypes of Alter's Tales of Vesperia Estelle Figure - Pre-orders Now Open!</a></span><br />

                                <span class="under_titles">POSTED BY <a href="">A745</a> | APRIL 27, 2013 | 8:00pm GMT | FILED UNDER: <a href="">TALES NEWS</a></span>

                        </div>

                <!-- NEWS BODY -->

                        <div class="newsbody">

                            <a href=""><img class="featured_image" src="http://gallery.abyssalchronicles.com/albums/userpics/10002/estelle_10.jpg" alt="" /></a>


                            Alter has released pictures of the colored prototype of their upcoming <em>Tales of Vesperia 1/8 Scale Estelle figure</em>. Some shops also have pre-orders open. In addition, the <em>Milla Maxwell plushie</em>, also by Alter, has some pre-orders open as well.
                            <br /><br /><br />

                            <a href="">READ THE REST »</a>

                        </div>

                            <div class="tagsline">

                            TAGS: <a href="">TALES OF VESPERIA</a>, <a href="">TALES OF XILLIA</a>, <a href="">ESTELLE</a>, <a href="">MILLA MAXWELL</a>, <a href="">MERCHANDISE</a>, <a href="">PS3</a>, <a href="">XBOB360</a>, <a href="">ALTER</a>, <a href="">ALTER</a>, <a href="">ALTER</a>, <a href="">ALTER</a>, <a href="">ALTER</a>, <a href="">ALTER</a>, 

                            </div>

                    </div>

那个CSS：

#newsheader {
    width: 628px;
    background: #3396cf;
    font-family: 'Merriweather Sans', Tahoma, Helvetica, Arial, Verdana, sans-serif;
    font-weight: bold;
    color: #ffffff;
    font-size: 18px;
    padding: 5px;
    margin-bottom: 10px;
}

#titlearea {
    width: 628px;
    border-left: 9px solid #da5099;
    border-bottom: 1px solid #c5a7bc;
    padding: 2px 0 1px 4px;
}

.comment_bubble {
    width: 50px;
    height: 35px;
    padding-top: 3px;
    text-align: center;
    color: #ffffff;
    font-family: Georgia, Arial, Tahoma, Verdana, sans-serif;
    font-size: 15px;
    font-weight: bold; 
    background: url('images/commentbubble.png') no-repeat left top;
    float: right;
}

.comment_bubble a {
    color: #ffffff;
    text-decoration: none;
    display: block;
    width: 100%;
    height: 100%;
}


.post_titles {
    color: #6c053c;
    font-family: 'Merriweather Sans', Tahoma, Helvetica, Arial, Verdana, sans-serif;
    font-weight: bold;
    font-size: 17px;
    padding: 0;
}

.post_titles a {
    color: #6c053c;
    text-decoration: none;
}

.post_titles a:hover {
    color: #ba0767;
}

.tagsline {
    font-family: Helvetica, Arial, Verdana, sans-serif;
    font-weight: bold;
    font-size: 11px;
    color: #636262;
    padding: 5px 5px 3px 13px;
    border-bottom: 1px solid #c5a7bc;
    text-transform: uppercase;
}

.tagsline a {
    color: #868889;
    text-decoration: none;
    width: 100%;
}

.tagsline a:hover {
    color: #000000;
}

.under_titles {
    font-family: Helvetica, Arial, Verdana, sans-serif;
    font-weight: bold;
    font-size: 11px;
    color: #636262;
    padding: 0;
    text-transform: uppercase;
}

.under_titles a {
    color: #868889;
    text-decoration: none;
}

.under_titles a:hover {
    color: #000000;
}

.newsbody {
    padding: 9px 8px 15px 13px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #000000;
}

.featured_image {
    border: 0px;
    margin-right: 10px;
    margin-bottom: 10px;
    width: 300px;
    height: auto;
    float: left;
    text-align: left;
}

谢谢你们。

Answer 1

无论你在哪里进行浮动，都要在这些浮动元素之后立即放置此代码：

<div style="float: none; clear:both;"> </div>

这可以避免内容重叠。

Answer 2

将此添加到您的CSS：

#newsmain {overflow: hidden;}
.tagsline {clear: both;}

第一行不是严格需要的，但它有助于容器包裹内容。除非使用某种包含方法，否则浮动将挂出其容器，overflow: hidden是最简单的方法（尽管它并不适用于所有情况）。

浮动图像从其div容器中渗出到另一个div中

2 个答案: