Html 一系列div中的2列布局

大脑今天不工作…似乎无法理解这一点。非常感谢你的帮助

我有一个非常简单的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

图像周围没有文字环绕，并且上面的内容不会溢出到下一行（行具有背景色）

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

---

谢谢

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

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

假设图标的宽度小于32px，并且有足够的文本防止行重叠

---

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

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

假设图标的宽度小于32px，并且有足够的文本防止行重叠

---

根据文档流，另一种选择是

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

---

根据文档流，另一种选择是

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

见：

见：

---

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

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.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宽度设置为小于行宽度，否则您将不得不处理换行。

这种方法的优点（和缺点）是，它将根据需要为图标提供尽可能多的空间。这是一个缺点，因为如果消息文本的偏移量发生变化，则整体外观将不太干净。是的，尽管这种变化可以通过为.message div、.icon div或两者定义框尺寸来轻松抵消。优点（和缺点）这种方法的优点是，它将根据需要为图标提供尽可能多的空间。这是一个缺点，因为如果消息文本的偏移量存在变化，则整体外观将不太干净。没错，尽管这种变化可以通过为.message div、.icon div或两者定义框尺寸来轻松抵消。不幸的是，当图像的高度大于文本的高度时，这将不起作用。关于一个夸张的例子，请参见：-然而，我确实喜欢你使用Gravatar图像的想法：）我意识到了不幸的局限性。限制是否相关取决于每个图标的文本量。如果用例确实有足够的文本，那么做任何更复杂的事情都只是浪费精力、清晰度和带宽；但是有一个简单的方法；看看我的答案。实际上，我使用的CSS比你少。不管怎样，您都可以使用+1进行努力：）不幸的是，当图像的高度大于文本的高度时，这将不起作用。关于一个夸张的例子，请参见：-然而，我确实喜欢你使用Gravatar图像的想法：）我意识到了不幸的局限性。限制是否相关取决于每个图标的文本量。如果用例确实有足够的文本，那么做任何更复杂的事情都只是浪费精力、清晰度和带宽；但是有一个简单的方法；看看我的答案。实际上，我使用的CSS比你少。不管怎样，你可以用+1来表示努力：）溢出：隐藏规则对我来说没有多大意义，因为我把它理解为剪切规则。然而，更为不言而喻的

清楚：两者都不允许
.row
扩展。该功能是在规范中定义的还是基于什么？@Aleksi:
overflow:hidden
是一种众所周知的清除浮动的技术。阅读。也值得一读：谢谢！我太久没有注意到这一点了。以更复杂的方式实现同样的规则太容易了。
overflow:hidden
规则对我来说没有多大意义，因为我把它理解为剪切规则。然而，更为不言而喻的
清楚：两者都不允许
.row
扩展。该功能是在规范中定义的还是基于什么？@Aleksi:
overflow:hidden
是一种众所周知的清除浮动的技术。阅读。也值得一读：谢谢！我太久没有注意到这一点了。以更复杂的方式实现同样的功能太容易了。