Question

我有一个像这样的html结构：

<div class="content">
    <div class="icon"></div>
    <div class="text">Some long message text which is wrapped in two lines.</div>
    <div style="clear:both"></div>
</div>

和相应的css：

.content {width:300px; margin:30px auto; border:1px solid #000}
.icon {width:40px; height:40px; background-color:maroon}
.icon, .text {float:left}

我想在一行中对齐图标和文本组件，而不使用任何相对和绝对宽度值。

这是一个小提琴 - http://jsfiddle.net/7kNSs/

Answer 1

删除CSS float属性表单.text

尝试Fiddle

HTML ：

 <div class="content">
    <div class="icon"></div>
    <div class="text">Some long message text which is wrapped in two lines.</div>
    <div style="clear:both"></div>
</div>

CSS ：

   .content 
        {
      width:300px; margin:30px auto; border:1px solid #000;
        }
   .icon 
        {
        width:40px; height:40px; background-color:maroon; float:left;
        }

Answer 2

删除浮动表单文本类

HTML

<div class="content">
    <div class="icon"></div>
    <div class="text">Some long message text which is wrapped in two lines.</div>
    <div style="clear:both"></div>
</div>

CSS

  .content {width:300px; margin:30px auto; border:1px solid #000}
.icon {width:40px; height:40px; background-color:maroon;float:left;}

Answer 3

你要做的就是取出.text div：

<div class="content">
    <div class="icon"></div>
    Some long message text which is wrapped in two lines.
    Some long message text which is wrapped in two lines.
    Some long message text which is wrapped in two lines.
    Some long message text which is wrapped in two lines.
    <div style="clear:both"></div>
</div>

.content {width:300px; margin:30px auto; border:1px solid #000}
.icon {width:40px; height:40px; background-color:maroon}
.icon, .text {float:left}

检查分叉小提琴：http://jsfiddle.net/Milanzor/tfrH6/

Answer 4

尝试更改此行.content {width:300px; margin:30px auto; border:1px solid #000} 通过这个

#content { overflow: hidden;width:300px; margin:30px auto; border:1px solid #000}

使用没有宽度的css float

4 个答案: