浮動列在彼此之下

我有問題試圖讓我的col3和col4浮在彼此之下。 100％寬度基於960px。我嘗試過漂浮，但沒有得到任何地方。浮動列在彼此之下

HTML：

<div class="listingAttributes"> 
<div class="col0"> 
<span class="name">Bedrooms:</span> 
<span class="value">2</span> 

<span class="name">Bathrooms:</span> 
<span class="value">4</span><br/> 

<span class="name">Price:</span></br> 
<span class="value">Asking price $1,250,000</span></p>               
</div> 
<div class="col1"> 
<span class="name">Floor area:</span> 
<span class="value">200m²</span> 
<span class="name">Land area:</span> 
<span class="value">1452m²</span> 
<span class="name">Rateable value</span> 
<span class="value">$980,000</span>                  
</div> 
<div class="col2"> 
<span class="name">Open home times:</span> 
<span class="value"> 
<p>Sat 1 Dec 2 pm - 2:45pm</p> 
<p>Sun 2 Dec 2 pm - 2:45pm</p> 

</span> 
</div> 

<div class="col3"> 
<span class="name">In the area</span><br/> 
<span class="value">Schools, Cafe's, Orewa Beach, Surfclub, Orewa Village, Silverdale Mall Wenderholm Park. Boat Ramp</span> 
</div> 
<div class="col4"> 
<span class="name">Parking</span><br/> 
<span class="value">Double Garage w space for 4 more vehicles outside plus dedicated boat bay</span> 
</div> 
</div>

CSS：

.listingAttributes{ 
    width:100%; 
    height:165px; 
    margin: 15px 10px -5px 10px; 
    border-bottom: 1px solid #FFB400; 
    background-color: red; 
} 
.listingAttributes .col0, .col1{ 
    width:160px; 
    height: 100%; 
    margin:0 15px 0 0; 
    float:left; 
    display: inline-block; 
} 
.listingAttributes .col2{ 
    width:180px; 
    height: 100%; 
    margin:0 15px 0 0; 
    float:left; 
    display: inline-block; 
} 

.listingAttributes .col3{ 
    width:350px; 
    height:100%; 
    float:left; 
    overflow: hidden; 
    display: inline-block; 
} 
.listingAttributes .col4{ 
    width:350px; 
    height:100%; 
    float:left; 
    display: inline-block; 
} 
.listingAttributes .sectionListingAttributes, .name{ 
    font-weight: bold; 
}

來源

2012-11-29 Jess McKenzie

你只能向左或向右浮動。你的意思是你想col4在col3下的紅色分區？ – user1534664

在你的小提琴中，col4在col3下面。我對這個問題是什麼感到困惑。 – Colleen

@ user1534664是 –

你忘了清除浮動。

只需添加：

<div style="clear:both;"></div>

COL3 DIV之後。在紅色區域

JSFiddle

COL3和COL4：上COL4

JSFiddle

來源

2012-11-29 23:30:40 Vucko

刪除屬性float:left;並使其display:block;沒有display:inline-block;

此外，刪除父高度<div class="listingAttributes">如果你想col3和col4在紅色的div內。

來源

2012-11-29 23:33:26 user1534664

的.listingAttributes .col3和.listingAttributes .col3規則可以簡化爲：

.listingAttributes .col3{ 
    float: left; 
}

http://jsfiddle.net/t9YRS/5/

我剛剛看了一下所有的紅色塊內被部分。在這種情況下，請從.listingAttributes規則中刪除height屬性。

http://jsfiddle.net/t9YRS/7/

來源

2012-11-29 23:34:36

浮動列在彼此之下

回答

相關問題