gpt4 book ai didi

css - 彼此下方的 float 柱

转载 作者:行者123 更新时间:2023-11-28 13:26:21 24 4
gpt4 key购买 nike

我在尝试让我的 col3col4 相互 float 时遇到问题。 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;
}

最佳答案

你忘了清除 float 。

只需添加:

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

在 col3 DIV 之后。

JSFiddle

红色区域的col3和col4:

JSFiddle

关于css - 彼此下方的 float 柱,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13636585/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com