2系列divs中的列布局

大腦今天不工作...似乎無法找出這一個。非常感謝您的幫助。2系列divs中的列布局

我有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

與圖像周圍沒有文字環繞，和上面的內容不溢出到下一行（行有背景顏色）。

我不想使用背景圖像圖像，因爲我希望圖像可點擊。

謝謝！

來源

2011-04-07 Neil McGuigan

參見

：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 
}

來源

2011-04-07 21:38:47 thirtydot

看起來不錯。是不是最好的？謝謝 – 2011-04-07 22:11:15

jsFiddle是最棒的！ – thirtydot 2011-04-07 22:54:29

「溢出：隱藏」規則對我來說沒有什麼意義，因爲我將它理解爲裁剪規則。然而更明顯的'clear：both''不允許'.row'擴展。規範中定義的功能或基於什麼？ – 2011-04-07 23:36:48

如果我理解正確的話，其中一個方案是

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

在那裏的假定圖標比32PX窄，有足夠的文本，以防止重疊行。

Live example.

來源

2011-04-07 21:14:47

還不錯，但是第一個圖像「蘸」下面的第一個div – 2011-04-07 22:10:40

也許是跨瀏覽器的問題？ http://jsfiddle.net/zfLpE/1/ – 2011-04-07 22:13:50

不幸的是，當圖像的高度大於文本的高度時，這不起作用。對於一個誇張的例子，請參閱：http://jsfiddle.net/thirtydot/zfLpE/8/ - 但是，我喜歡使用Gravatar圖像的想法:) – thirtydot 2011-04-07 22:56:18

另一種選擇，這取決於文檔流將是

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

來源

2011-04-07 21:21:31

這種方法的好處（和缺點）是它會根據需要爲圖標提供足夠的空間。這是一個缺點，因爲如果消息文本的偏移量有變化，整體外觀將不太乾淨。 – 2011-04-07 21:26:30

沒錯，雖然通過定義.message div，.icon div或兩者的盒子尺寸，可以很容易地抵消這種變化。 – 2011-04-07 21:30:45

對於水平細胞我通常使用內聯塊樣式。

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>

否則佔到之間的一些空間divs並設置單獨的div寬度小於行寬，否則你將不得不處理包裝。

來源

2011-04-07 22:30:11 andykrynn

2系列divs中的列布局

回答

相關問題