我试图将背景色应用于其中有两个浮动div的div,但它没有应用它。容器中的两个div都被清除,并像我希望的那样并排显示,但整体背景色没有应用
jsfiddle此处
<div class="contactformcontainer">
<div class="maincontactform">
<h4>SEND US A MAIL</h4>
<form>
<input type="text" placeholder="What is your name ?">
<input type="text" placeholder="Email">
<textarea type="text" placeholder="What is your message to us ?"></textarea>
<input type="submit" value="submit">
</form>
</div>
<div class="maincontactdetails">
<h4>Email : </h4><p>office@blah.org</p>
<h4>Tel : </h4><p>(434)-5564-63443534</p>
<h4>Address : </h4><p>blah blah blah.</p>
</div>
</div>
CSS
.contactformcontainer{
width:100%;
background-color: green;
}
.maincontactform{
width: 47%;
padding: 24px;
float:left;
background-color: blue;
clear:both;
}
.maincontactdetails{
width: 40%;
padding: 24px;
background-color: red;
float:right;
}
float: left;
.contactformcontainer
:)
.contactformcontainer{
float: left;
width:100%;
background-color: green;
}
这里需要好的旧clearfix"hack"。要强制容器自清除其子级,请为div提供一个contactformcontainer类,并添加这些样式
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html .clearfix { height: 1%; }
.clearfix { display: block; }
或者只将外部容器向左浮动,您可以选择:)
添加position: absolute;
可能会解决您的问题。
看看这把小提琴。