Question

我在一个盒子里尝试4个水平div，但它们没有对齐。假设我想要水平添加4个，5个，6个或7个小盒子，我该怎么做？这是我的HTML和css代码。前3个对齐好，但是当我添加其他时，它只是将它们放在其他位置

这是我的链接以防万一。它一直在底部

#box2{
  border: 3px solid green;
  margin: 40px;
  text-align: center;
}

#left1{
  border: 1px solid green; float: left; margin-left: 30px;
}


#right1{
 border: 1px solid red; float: right; margin-right: 30px;
}

#middle1{
 border: 1px solid tan;  margin: auto; width: 50px;

}

#middlerightbox{
 border: 1px solid blue; margin: auto; width: 50px;

}




      <div id="box2">
         <div id="margin">
             <div id="left1">
               hello
             </div>

             <div id="right1">
               hello
             </div>

             <div id="middle1">
               hello
             </div>

           <div id="middlerightbox">
               hello
             </div>

         <div class="clear"> 
        </div>
      </div>

Answer 1

我认为这就是你想要的：



#box2 {
border: 3px solid green;
margin: 40px;
height: 20px;   // necessary!
text-align: center;
}

#left1 {
border: 1px solid green; float: left;
}


#right1 {
border: 1px solid red; float: left;
}

#middle1 {
border: 1px solid tan;  float: left; margin: auto;
}

#middlerightbox {
border: 1px solid blue; float: left; margin: auto;
}

<div id="box2">
<div id="margin">
<div id="left1">hello</div>
<div id="right1">hello</div>
<div id="middle1">hello</div>

<div id="middlerightbox">hello</div>

<div class="clear"> </div>
</div>

#box2 { border: 3px solid green; margin: 40px; height: 20px; // necessary! text-align: center; } #left1 { border: 1px solid green; float: left; } #right1 { border: 1px solid red; float: left; } #middle1 { border: 1px solid tan; float: left; margin: auto; } #middlerightbox { border: 1px solid blue; float: left; margin: auto; } <div id="box2"> <div id="margin"> <div id="left1">hello</div> <div id="right1">hello</div> <div id="middle1">hello</div> <div id="middlerightbox">hello</div> <div class="clear"> </div> </div>

如有必要，请寻求更多帮助！

试图在中心进行简单的水平对齐

1 个答案: