<section id="main-content">
<div class="language-box html">HTML</div>
<div class="language-box javascript">JAVACRIPT</div>
<div class="language-box css">CSS</div>
<div class="language-box php">PHP</div>
<div class="clear"></div>
</section>
我试图让这4个盒子集中并排放在一起。
我正在使用此代码,但它无法正常工作:
#main-content {
margin: 0 auto;
}
.language-box {
width: 279px;
height: 400px;
background-color: white;
float: left;
margin: 0 auto;
}
答案 0 :(得分:1)
您可以移除浮动,将项目显示为inline-block
并将text-align: center
设置为容器。
#main-content {
margin: 0 auto;
text-align: center;
width: 100%;
}
.language-box {
width: 80px;
border: 1px solid #000000;
height: 400px;
background-color: white;
/* float: left;
margin: 0 auto; */
display: inline-block;
}
答案 1 :(得分:0)
你需要在float元素之后清除: #main-content {overflow:hidden}
答案 2 :(得分:0)