1

col3とcol4を互いに浮かせようとして問題が発生しています。100％の幅は960pxに基づいています。フローティングを試しましたが、どこにも行きません。

http://jsfiddle.net/t9YRS/

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;
}
4

3 に答える 3

2

フロートをクリアするのを忘れました。

単に追加します：

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

col3DIVの後。

JSFiddle

赤い領域のcol3とcol4：

JSFiddle

于 2012-11-29T23:30:40.637 に答える
0

col4でプロパティfloat:left;を削除しdisplay:block;、display:inline-block;

<div class="listingAttributes">また、赤いdiv内にcol3とcol4が必要な場合は、親の高さを削除します。

于 2012-11-29T23:33:26.253 に答える
0

.listingAttributes .col3および.listingAttributes .col3ルールは次のように簡略化できます。

.listingAttributes .col3{
    float: left;
}

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

赤いブロックの中にあるすべてのものについての部分を読んだだけです。その場合は、ルールheightからプロパティを削除してください。.listingAttributes

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

于 2012-11-29T23:34:36.953 に答える