Css 浮柱
我在试图让我的col3和col4漂浮在彼此下方时遇到问题。100%宽度基于960px。我曾尝试过漂浮,但却一无所获 HTML:Css 浮柱,css,html,Css,Html,我在试图让我的col3和col4漂浮在彼此下方时遇到问题。100%宽度基于960px。我曾尝试过漂浮,但却一无所获 HTML: <div class="listingAttributes"> <div class="col0"> <span class="name">Bedrooms:</span> <span class="value">2</span> <span class="name">Bathroo
<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>
.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;
}
你忘了清理浮子 只需添加:
<div style="clear:both;"></div>
在col3分区之后
红色区域中的col3和col4:
在col4上删除属性
float:left编码>并使其显示:块代码>非显示:内联块代码>
此外,如果希望col3和col4位于红色分区内,请删除父级上的高度。可以将.listingAttributes.col3
和.listingAttributes.col3
规则简化为:
.listingAttributes .col3{
float: left;
}
我刚读了那篇关于一切都在红色街区内的文章。在这种情况下,请从.listingAttributes
规则中删除height
属性
您只能向左或向右浮动。你的意思是说你想在红色的提琴里把col4放在col3下面吗?在你的小提琴里,col4放在col3下面。“我不知道问题出在哪里。”科琳:不在部门里