html - HTML和CSS中的单独div

Question

我正在制作一个包含3个主要列，一个页眉和一个页脚的页面。

我将每一列放在一个带有“主列”类的div中。第二个div和第三个div内部也有div。

问题是，当我对.main列使用“ float”时，只会创建两列。第三列嵌套在第二列中。页脚部分也嵌套在第二列中。 （页脚部分也是div）

我想将第三列和页脚部分分开。我该怎么办？

HTML：

div.main-column {
  float: right;
  box-sizing: border-box;
  margin: auto 1.66%;
  background-color: gray;
}
.main-column-right {
width: 20%;
}

.main-column-center {
width: 40%;
}

.main-column-left {
width: 30%;
}

<header></header>

<div class="main-column main-column-right">
 <ul>
  <li></li> (x12)
 </ul>
</div>

<div class="main-column main-column-center">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

<div class="main-column main-column-left">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

<div id="footer"></div>

Answer 1

检查此代码。我希望这能帮到您。要使用float制作3列，您必须指定宽度。当您使用1.66％的边距时，这就是为什么必须在div.main-column中使用小于30％的宽度的原因。为了固定页脚，您必须清除浮点数。我曾经制作另一个div并将所有浮点元素放入div中，然后从CSS清除浮点数，但是还有其他方法可以清除它们。

检查此代码== >>

/*header*/
header {
	width: 100%;
	background-color: grey;
	height: 80px;
	margin-bottom: 10px;
}


div.main-column {
	float: right;
	box-sizing: border-box;
	margin: auto 1.66%;
	width: 30%; /* give a width of less than 30%. so, if you use 30, (30x3)=90 + (1.66x6)=9.96 == 99.96% */
}

/*clearing floats*/
#content::after {
	content: "";
	display: block;
	clear: both;
}

.main-column-center div {
	height: 100px;
	width: 100%;
	margin-bottom: 5px;
	background-color: red;
}

.main-column-left div {
	height: 100px;
	width: 100%;
	margin-bottom: 5px;
	background-color:blue;
}

#footer {
	width: 100%;
	background-color: grey;
	height: 80px;
}

<header>Header</header>

	<div id="content"> <!-- <<== put all the divs in another div where you use float. Just for clearing the floats -->

		<div class="main-column main-column-right">
			I am right sided div
			<ul>
			 	<li>list 1</li>
			 	<li>list 1</li>
			 	<li>list 1</li>
			 	<li>list 1</li>
			 	<li>list 1</li>
			 	<li>list 1</li>
			 	<li>list 1</li>
			 	<li>list 1</li>
			 	<li>list 1</li>
			 	<li>list 1</li>
			 	<li>list 1</li>
			 	<li>list 1</li>
		 	</ul>
		</div>



		<div class="main-column main-column-center">
			I am centered div
		  <div></div>
		  <div></div>
		  <div></div>
		  <div></div>
		</div>


		<div class="main-column main-column-left">
			I am left sided div
		  <div></div>
		  <div></div>
		  <div></div>
		  <div></div>
		</div>

	</div>

	<div id="footer">Footer</div>