float right element outside of parent

debugcn 投稿 Dev

River CR Phoenix

I have a parent div and three children. i want one to float left of parent, one to be in exact center of parent and one to float right of parent. but the floated right element has gone outside of the parent div. its not because of lack of space.

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>

Blazemonger

In your HTML, move the right-floated element before the element you want it to float around:

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

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]