Question

这让我发疯了。我对这些东西比较陌生，所以试图在过去一小时内找出这个。如果有人可以帮助我，我会非常感激。

我有以下代码：

<div class="middle_box">
     <div class="box left">
          Some large text
     </div>
     <div class="box right">
          Some large text as well
     </div>
</div>

CSS：

.middle_box {
    height: 260px;
    margin: 0 auto;
    width: 960px;
}
.box {
    float: left;
    font-size: 21px;
    margin-right: 50px;
    margin-top: 25px;
    padding-top: 25px;
    width: 390px;
}

正如你所知，容器的宽度是960px。现在，我想将两个.box元素集中在960px容器中，这就是我丢失的地方。

我尝试了什么？

我尝试使用margin: 0px auto;并试图通过在双方添加margin-left来伪造它，但它只是不起作用。我怎样才能做到这一点？

Answer 1

你需要清除“.middle_box”，因为它的子元素是浮动的。

.middle_box:before, .middle_box:after {
    content: "";
    display: table;
}
.middle_box:after { clear: both; }

应该做的伎俩

Answer 2

使用此hack的最佳方法是clearfix：

.middle_box:after {
        visibility: hidden;
        display: block;
        content: "";
        clear: both;
        height: 0;
        }

Answer 3

当您使用固定宽度960px和390px时，为什么不设置边距呢？易于计算，在此类设置中不需要高级CSS“魔法”。

.middle_box {
    height: 260px;
    margin: 0 auto;
    width: 960px;
    background-color: red;
}
.box {
    float: left;
    font-size: 21px;
    margin-left: 60px; /* <--- */
    margin-top: 25px;
    padding-top: 25px;
    width: 390px;
    background-color: yellow;
}

enter image description here

Answer 4

这是Fiddle

<强> HTML

浮动 - 不同维度

<div class="middle_box">
  <div class="box0 left">
      Some large text
  </div>
  <div class="box0 right">
      Some large text as well
  </div>
</div>

不浮动 - 相同尺寸

<div class="middle_box">
  <div class="box1">
      Some large text
  </div>
  <div class="box1">
      Some large text as well
  </div>
</div>

清楚 - 一个在另一个

的顶部

<div class="middle_box">
  <div class="box2 clear">
      Some large text
  </div>
  <div class="box2 clear">
      Some large text as well
  </div>
</div>

<强> CSS

.middle_box {
  margin: 0 auto 10px;
  width: 960px;
  height: 260px;
  text-align: center;
  text-transform: uppercase;
  border: 1px solid #333;
}
.box0 {
  font-size: 21px;
  padding-top: 25px;
  height: 65px;
  border: 1px solid #333;
}
.left {
  float: left;
  width: 585px;
  margin: 24px 6px 0 24px;
}
.right {
  float: right;
  width: 300px;
  margin: 24px 24px 0 6px;
}
.box1 {
  float: left;
  font-size: 21px;
  margin-top: 25px;
  margin-left: 25px; /* margin-left | calculate 960px - boxes width - borders */
  padding-top: 25px;
  height: 65px;
  width: 438px;
  border: 1px solid #333;
}
.box2 {
  font-size: 21px;
  margin: 25px auto 25px;
  padding-top: 25px;
  width: 442px;
  height: 65px;
  border: 1px solid #333;
}
.clear {
  clear: both;
}

Answer 5

中心花车很难，但是你需要使用浮子吗？为什么不使用：

display: inline-block

使用float和inline-block都有优点/缺点，两者都有它们的怪癖，但最终我发现内联块更有用，更容易开发。以下是使用inline-block

解决问题的方法

DEMO FIDDLE

如果你确实使用它，还可以了解它的白色空间怪癖（但很容易解决）：

http://css-tricks.com/fighting-the-space-between-inline-block-elements/

如何将两个浮动元素集中在一个容器中？

5 个答案: