Question

我有一些简单的标记，我创建了一个覆盖整个屏幕的覆盖图（使用position: absolute），然后在里面我想用浮点数创建一些列。

HTML

<div class="overlay">
  <div class="position-modal">
  </div>
  <div class="modal">
    <h3>Enter email</h3>
    <form action="">
      <input type="text">
      <input type="submit" name="" id="" value="submit" />
    </form>
  </div>
  <div class="position-modal">
  </div>
</div>

CSS

.overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(255,255,0,0.75);
}

.modal, .position-modal {
    box-sizing: border-box;
    float: left;
    width: 33.3%;
}

我想要实现的目标是：

+--------------+-------------+-------------+
|              |             |             |
| This column  |             | This column |
| only exists  | Enter email | only exists |
| to           | +----+ ++   | to          |
| centralize   | +----+ ++   | centralize  |
| main col     |             | main col    |
|              |             |             |
|              |             |             |
|              |             |             |
|              |             |             |
|              |             |             |
|              |             |             |
+--------------+-------------+-------------+

但是一切都坐在左边，
这就是我得到的 - http://codepen.io/anon/pen/YwNzqa?editors=110

当父级是绝对的时，是否可以浮动这些div？

Answer 1

问题是.position-modal元素的高度为0。这意味着.modal元素没有考虑它们（导致它位于左侧）。您会注意到，如果您在元素上设置min-height，它将按预期工作：

Updated Example

.modal, .position-modal {
    box-sizing: border-box;
    float: left;
    width: 33.3%;
    min-height: 1px;
}

但是，在我看来，上述解决方案相对较为狡猾。除非有正当理由这样做，否则我建议使用margin: 0 auto水平居中元素。

Updated Example

.modal {
    box-sizing: border-box;
    width: 33.3%;
    margin: auto;
}

Answer 2

你不需要这样做。

<div class="overlay">

  <div class="modal">
    <h3>Enter email</h3>
    <form action="">
      <input type="text"><br />
      <input type="submit" name="" id="" value="submit" />
    </form>
  </div>

和

.modal, .position-modal {
    box-sizing: border-box;
    text-align: center;
   width: 33.3%;
}

可以在已经绝对定位的父级内浮动子元素吗？

2 个答案: