jquery - 一个简单的CSS定位系统。试图将它们完美均匀地对齐

Question

大家好，我几乎在努力让 3 个盒子彼此完美对齐，但我不确定为什么它总是错位

我有一个 .clear 类，但仍然不会变得均匀，中间的类会下降

这是我的 html 和我的 css 的顺序

      <div id="left3box">
        <p> hello i am left
      </div>
      <div id="middle3box">
        <p> hello i am middle
      </div>
      <div id="right3box">
        <p> hello i am right
      </div>
     <div class="clear"></div>    

和我的CSS

#thirdbox {
  border: solid 4px black;
  margin: 60px;
}

#left3box{
 width: 300px; border: 1px solid red; float: left; margin-right: 30px;
}

#middle3box{
 width: 300px; border: 1px solid red; margin: auto;

}

#right3box{
 width: 300px; border: 1px solid red; float: right; margin-right: 30px;
}

Answer 1

如果您希望 3 个框均匀分布，您最好移除“ float ”，让它们成为“dispay:inline-block”，将父元素设置为“text-align:center”，然后使用“margin” ' 在 div 上决定它们之间的间距

您提供的代码可能会起作用，具体取决于父容器的宽度