Question

大脑今天不工作......似乎无法想象这一个。非常感谢您的帮助。

我有一个非常简单的div列表：

<div class="row">
  <div class="icon">some icon image here</div>
  <div class="message">some long content here</div>
</div>
<div class="row">
  <div class="icon">some icon image here</div>
  <div class="message">some long content here</div>
</div>

我希望它看起来像这样：

IMG  text text text
     text text text

IMG  text text text
     text text text

图像周围没有文字环绕，上面的内容没有溢出到下一行（行有背景颜色）。

我不想使用背景图像，因为我希望图像可以点击。

谢谢！

Answer 1

请参阅：http://jsfiddle.net/thirtydot/pFLEP/

.row {
    overflow: hidden; /* clear the floats */
    background: #ccc;
    margin: 0 0 8px 0 /* margin just for demo */
}
.icon {
    float: left
}
.icon img {
    display: block /* remove "space" under image. try commenting this out to see what I mean */
}
.message {
    margin: 0 0 0 74px
}

Answer 2

如果我理解正确，一个选项是

.icon { position: absolute; } 
.message { margin-left: 32px; }

假设图标比32px窄，并且有足够的文本来防止行重叠。

Live example.

Answer 3

另一种选择，取决于文档流程

.row { display:block; clear:left;}
.icon, .message { display:block; float:left;}

Answer 4

对于水平单元格，我通常使用内联块样式。

div.row{  
  background-color:#aaa; 
  width:350px; 
}  

div.icon, div.message{  
  display:inline-block;
  vertical-align:top;  
  *display:inline;   /*this is for some older IE browser compatibility*/
}

div.icon{width:50px}

div.message(width:300px}

另外需要注意的是，当这样做的时候，有些浏览器会在和作为空格之间渲染换行符，所以我通常会这样做

</div
><div>

否则在div之间占一些空间并将各个div宽度设置为小于行宽，否则你将不得不处理包装。

一系列div中的2列布局

4 个答案: