Question

我正在谷歌搜索但仍然没有找到smth。

以下是代码：

          <div class="SingleNewsMain" news-type = "{$value.news_type_id}" >

                    <div class="NewsTitleMain">
                        <a href= "index.php?show_news={$value.id}"><!--{$value.title}-->Some random header</a>
                    </div>
                    <div class="NewsMainImage">
                        <a href="#">
                            <img src="img/13095.png">
                        </a>    
                    </div>  

                    <div class="NewsMainShort"> 
                        <!--{$value.short_text}-->
                        Some random description
                    </div>

                    <div class="NewsInfo">
                            <span>
                            <icon class="icon-eye-open"></i>
                            </span>
                            <span class="ViewsInfo">2100</span>                         

                            <span>
                            <icon class="icon-comment"></i>
                            </span>
                            <span class="CommentaryInfo"> 46</span>
                    </div>
                </div>

这是我的CSS

.SingleNewsMain{
  border-bottom: 1px solid rgb(175,175,175);
}
.NewsTitle {
  font-size: 24px;
  padding-top: 20px;
  line-height: 27px;
  font-family: 'Playfair Display SC';
}

.NewsTitleMain {
  font-size: 24px;
  padding-top: 20px;
  line-height: 25px;
  font-family: 'Playfair Display SC';
}

.NewsMainImage{
  padding: 10px 10px 5px 0px;
  width: 200px;
  height: 110px;
  float: left;
  clear: both;
}
.NewsMainShort {
  font-size: 14px;
  padding-top: 5px;
  padding-bottom: 30px;
  position: relative;
}

还有两个截图，第一个。 .NewsMainShort的属性为clear:both

http://imageshack.us/photo/my-images/833/x7cp.png/

第二个一个，.NewsMainShort没有属性clear:both

http://imageshack.us/photo/my-images/96/jl29.png/

我希望文本只是环绕图像，而不是在第二个屏幕截图上看起来像。 Chrome中的Inspect Element显示，当没有clear:both时，图像的DIV不符合SingleNewsMain的高度。

Answer 1

尝试在第二个屏幕截图中保留css，但在之后添加：

<div class="NewsMainShort"> 
                    <!--{$value.short_text}-->
                    Some random description
                </div>

<br style="clear:both;">

浮动图像换行无法正常工作

1 个答案: