Question

我正在为头条新闻构建一个模板，以后会有不同的长度。在标题之前是一个图标。根据图标宽度，为什么标题会中断？

HTML

<img src="http://www.ecotricity.ch/pix/slideBanner/carLogo.gif" width="50"/>
<div> 
   <img src="http://png-1.findicons.com/files/icons/1241/twitter_land/256/school_of_fish.png" width="50"/> 
   <h3> The cars are faster than fish</h3> 
</div>

CSS

div{ 
    float: left;
    margin-left: 30px;
}

img{
    float: left;
}

Answer 1

将div样式替换为：

div{ 
    float: left;
    margin-left: 30px;
    width:300px;
}
//increase the width of div

Answer 2

这是因为您未在img内的div元素之后清除浮动广告。

您有两种选择。您可以使用CSS从float元素中删除img：

div img {
    float: none;
}

JSFiddle demo 1

或在div：

中添加结算元素

<img src="..." width="50"/> 
<br style="clear:both"/>
<h3> The cars are faster than fish</h3>

JSFiddle demo 2

如果您希望h3元素与img元素并排，则可以将上面的选项1更改为：

div img,
div h3 {
    display: inline-block;
    float: none;
}

JSFiddle demo 3

Answer 3

如果你的问题是＆＃34;为什么H1有换行符＆＃34;答案是因为它是块级元素;但是，如果你问如何完成诸如将所有元素放在垂直线上之类的东西，你可以这样做：http://jsfiddle.net/rM6G9/7/

div{ 
    float: left;
    clear:both;
}

img{
    float: left;
    display: block;
}
h3{
    float:left;
    clear:both;
}

如果您希望第二张图片和标题内联，请执行以下操作：

div{ 
    float: left;
    clear:both;
}

img{
    float: left;
    display: block;
}
h3{
    float:left;
}

为什么<h1>有一个换行符？</h1>

3 个答案: