在父母之外浮动右边的元素

Question

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

fiddle

#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>

Answer 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>

Answer 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;
}