在父元素之外浮动右元素答案

【问题标题】：float right element outside of parent在父元素之外浮动右元素
【发布时间】：2014-12-19 01:22:51
【问题描述】：

我有一个父 div 和三个孩子。我想要一个漂浮在父母的左边，一个在父母的正中心，一个漂浮在父母的右边。但是浮动的右元素已经超出了父 div。不是因为空间不足。

#boards {
  width: 100%;
  height: 500px;
  background-color: white;
  text-align: center;
}
#boards p {
  font-family: 'bebas_neueregular';
  color: rgba(160, 224, 247, 1);
  margin-top: 30px;
  font-size: 50px;
}
.board_items {
  width: 250px;
  height: 300px;
  background-color: gray;
}
#board_items_container {
  width: 85%;
  margin-left: auto;
  margin-right: auto;
  height: auto;
  background-color: orange;
  padding: relative;
}
#board1 {
  float: left;
  padding: relative;
}
#board2 {
  margin-left: auto;
  margin-right: auto;
  padding: relative;
}
#board3 {
  float: right;
  padding: relative;
}

<div id="boards">
  <p>TOP BOARDS</p>
  <div id="board_items_container">
    <div id="board1" class="board_items">
    </div>
    <div id="board2" class="board_items">
    </div>
    <div id="board3" class="board_items">
    </div>
  </div>
</div>

【问题讨论】：

padding: relative; 是做什么的？我以前从未见过。你的意思是position: relative;？
填充：相对无效
哎呀，我的错。我崇高的自动完成功能坏了：P
您可以简单地将display: inline-block; 用于所有三个div 标签来解决这个问题。

标签： html css

【解决方案1】：

在您的 HTML 中，将右浮动元素移动到您希望它浮动的元素之前：

<div id="boards">
  <p>TOP BOARDS</p>
  <div id="board_items_container">
    <div id="board1" class="board_items"> <!-- float: left -->
    </div>
    <div id="board3" class="board_items"> <!-- float: right -->
    </div>
    <div id="board2" class="board_items"> <!-- not floated -->
    </div>
  </div>
</div>

【讨论】：

如果你能解释一下出了什么问题，为什么当我移动上面的第三个元素时它会起作用？？
由于board2 是块级元素，它填充了所有可用的水平空间。如果board3 在它之后，它必须在下一行。如果之前放过，可以在同一行，那个空间就不再给board2了。
@RiverCRPhoenix - 当你给 margin-left/right:auto.. 它占用了父 div 的整个空间。所以当浮动右元素进入画面时，它除了向下无处可去。因此，通过向上移动右侧块，您可以首先渲染右侧部分
我有另一个疑问，当我给 margin-left/right auto 时，为什么元素的左边距来自父级而不是来自 first/sibling-before 的末尾，而右边距会影响下一个/兄弟姐妹之后。
恐怕我不明白你的意思。您可能应该将此作为一个单独的问题发布。

【解决方案2】：

试试下面的css代码：

#board1 {
    display: inline-block;
    float: left;
    position: relative;
}
#board2 {
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}
#board3 {
    display: inline-block;
    float: right;
    position: relative;
}

【讨论】：