Question

我无法弄清楚如何让div 6占用下一个div的4,5和7的所有空白区域，而不会移动div 7。感谢任何帮助。每当我移动div 6或使其变大时，div 7就会向下移动而我不希望这样。

以下代码在代码段

中

#test1 {
  background-color: red;
  float: left;
  width: 15%;
}

#test2 {
  background-color: green;
  float: left;
  width: 85%;
}

#test3 {
  background-color: blue;
  height: 25%;
  clear: both;
}

#test4 {
  background-color: orange;
  height: 20%;
  width: 10%;
  float: left;
}

#test5 {
  background-color: grey;
  height: 20%;
  width: 20%;
  float: left;
}

#test6 {
  background-color: purple;
  height: 30%;
  width: 100%;
}

#test7 {
  background-color: yellow;
  width: 30%;
  height: 45%;
  float: left;
}

<div id="test1"> test 1 </div>
<div id="test2"> test 2 </div>
<div id="test3"> test 3 </div>
<div id="test4"> test 4 </div>
<div id="test5"> test 5 </div>
<div id="test6"> test 6 </div>
<div id="test7"> test 7 </div>

Answer 1

您可以尝试使用flexbox。使用flex:1到div 6来获取剩余的空白区域。

＆＃13;

.parent {
  display: flex;
  flex-wrap: wrap;
}

#test1 {
  background-color: red;
  width: 15%;
}

#test2 {
  background-color: green;
  width: 85%;
}

#test3 {
  background-color: blue;
  width: 100%;
}

#test4 {
  background-color: orange;
  width: 10%;
}

#test5 {
  background-color: grey;
  width: 20%;
}

#test6 {
  background-color: purple;
  flex: 1;
}

#test7 {
  background-color: yellow;
  width: 30%;
}

＆＃13;

<div class="parent">
  <div id="test1">test 1</div>
  <div id="test2">test 2</div>
  <div id="test3">test 3</div>
  <div id="test4">test 4</div>
  <div id="test5">test 5</div>
  <div id="test6">test 6</div>
  <div id="test7">test 7</div>
</div>

＆＃13;

Answer 2

您可以将容器用作flexbox并允许test6自动增长。

＆＃13;

.container {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

#test1 {
  background-color: red;
  width: 15%;
}

#test2 {
  background-color: green;
  width: 85%;
}

#test3 {
  background-color: blue;
  width: 100%;
}

#test4 {
  background-color: orange;
  width: 10%;
}

#test5 {
  background-color: grey;
  width: 20%;
}

#test6 {
  background-color: purple;
  flex: 1;
}

#test7 {
  background-color: yellow;
  width: 30%;
}

＆＃13;

<div class="container">
  <div id="test1"> test 1 </div>
  <div id="test2"> test 2 </div>
  <div id="test3"> test 3 </div>
  <div id="test4"> test 4 </div>
  <div id="test5"> test 5 </div>
  <div id="test6"> test 6 </div>
  <div id="test7"> test 7 </div>
</div>

＆＃13;

Answer 3

在6中进行div test 7它将解决它。这里的代码看起来像

＆＃13;

#test1 {
background-color: red;
float: left;
width: 15%;

}

#test2 {
background-color: green;
float: left;
width: 85%;

}

#test3 {
background-color: blue;
height: 25%;
clear: both;
}

#test4 {
background-color: orange;
height: 20%;
width: 10%;
float: left;
}

 #test5 {
background-color: grey;
height: 20%;
width: 20%;
float: left;
}

#test6 {
background-color: purple;
height: 30%;
width: 100%;

}

#test7 {
background-color: yellow;
width: 30%;
height: 100%;
float: right;
}

＆＃13;

<html>
	<div id="test1"> test 1 </div>
	<div id="test2"> test 2 </div>
	<div id="test3"> test 3 </div>
	<div id="test4"> test 4 </div>
	<div id="test5"> test 5 </div>
	<div id="test6"> test 6 
    <div id="test7"> test 7 </div>
	</div>
</html

＆＃13;

在不推动另一个div的情况下移动div

3 个答案: