Question

我已经使用浮动并排创建了3个div，如下所示，但是我不确定如何添加一个宽度为100％且高度在这些下方的div。我试过简单地创建一个div，但它根本就没有出现，我不确定这是一个简单的编码错误还是我需要做的更多

.first-div {
 width:33.33%;
 height:150px;
 float:left;
 background-color:pink;
}

.second-div {
 width:33.33%;
 height:150px;
 float:left;
 background-color:blue;
}

.third-div {
width:33.33%;
height:150px;
float:left;
background-color:purple;
}

Answer 1

将clear: both;添加到第四个DIV

.first-div {
  width: 33.33%;
  height: 150px;
  float: left;
  background-color: pink;
}

.second-div {
  width: 33.33%;
  height: 150px;
  float: left;
  background-color: blue;
}

.third-div {
  width: 33.33%;
  height: 150px;
  float: left;
  background-color: purple;
}

.fourth-div {
  clear: both;
  background: yellow;
  height: 150px;
}

<div class="first-div"></div>
<div class="second-div"></div>
<div class="third-div"></div>
<div class="fourth-div"></div>

Answer 2

.first-div {
  width: 33.33%;
  height: 150px;
  float: left;
  background-color: pink;
}

.second-div {
  width: 33.33%;
  height: 150px;
  float: left;
  background-color: blue;
}

.third-div {
  width: 33.33%;
  height: 150px;
  float: left;
  background-color: purple;
}

.fourth-div {
  width: 100%;
  height: 150px;
  float: left;
  background-color: black;
}

<div class="first-div">shashi</div>
<div class="second-div">shashi</div>
<div class="third-div">shashi</div>
<div class="fourth-div">shashi</div>

Answer 3

将前三个Div放在他们自己的div中。设置位置，如果这个新的父div为relative，并且其中3个div的位置为绝对值。

最后，将第四个div放在三个div之后，然后将它的位置设置为相对。

这是最简单的答案，需要较少的输入，并留下较少的代码空间，以免干扰未来的交互

<div id=columnSet>
    <div class=column></div>
    <div class=column></div>
    <div class=column></div>
</div>
<div id=singleDiv></div>

将div id = columnSet的宽度设置为100％，将div设置为内部以分别创建33％的列。 div会自动排队。

祝你编码好运！

Answer 4

Clearfix应该是您问题的解决方案。你可以在这里阅读https://www.w3schools.com/css/css_float.asp，我建议在clearfix div中包装前3个div。

＆＃13;

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

.first-div {
  width: 33.33%;
  height: 150px;
  float: left;
  background-color: pink;
}

.second-div {
  width: 33.33%;
  height: 150px;
  float: left;
  background-color: blue;
}

.third-div {
  width: 33.33%;
  height: 150px;
  float: left;
  background-color: purple;
}

.last-div {
  margin: 25px 0 0 0;
  height: 50px;
  background-color: green;
  width: 100%;
}

＆＃13;

<div class="clearfix">
  <div class="first-div"> </div>
  <div class="second-div"> </div>
  <div class="third-div"> </div>
</div>

<div class="last-div"> </div>

＆＃13;

Answer 5

还有另一种解决方案，使用<div>类创建一个新的.clearfix元素。

.clearfix{
  display: block;
  content: "";
  clear: both;
}

或更好：

.clearfix:before,
.clearfix:after {
  content:"";
  display:table;
}

.clearfix:after {
clear:both;
}

每次你想要在你的页面中进行这样的分离时，这个hack都会很有用。这个hack用在许多框架中（Bootstrap for example）。

/*Clearfix*/
.clearfix:before,
.clearfix:after {
  content:"";
  display:table;
}

.clearfix:after {
clear:both;
}
/*My css*/
.first-div {
width:33.33%;
height:150px;
float:left;
background-color:pink;
}

.second-div {
width:33.33%;
height:150px;
float:left;
background-color:blue;
}

.third-div {
width:33.33%;
height:150px;
float:left;
background-color:purple;
}
.forth-div{
  height:150px;
  background-color:red;
}

<div class="first-div"></div>
<div class="second-div"></div>
<div class="third-div"></div>
<div class="clearfix"></div>
<div class="forth-div"></div>

Answer 6

试试这段代码

<html>
<head>
<title></title>
<style>
.first-div {
  width: 33.33%;
  height: 150px;
  float: left;
  background-color: pink;
}

.second-div {
  width: 33.33%;
  height: 150px;

  float: left;
  background-color: blue;
}

.third-div {
  width: 33.33%;
  height: 150px;
  float: left;
  background-color: purple;
}

.fourth-div {
  width: 100%;
  display: inline-block;
  background: yellow;
  height: 150px;
}
</style>
</head>
<body>
<div class="first-div"></div>
<div class="second-div"></div>
<div class="third-div"></div>
<div class="fourth-div" ></div>

 
</body>
</html>

浮动后添加div

6 个答案: