How to align three divs (left/center/right) in one div?

Question

I want to align 3 divs inside a container div, like this: [[LEFT][CENTER][RIGHT]] The width of the container div is 100% (no width is set), and after resizing the container, the middle div It should remain in the middle position. So I set: #container{width:100%;}#left{float:left;width:100px;}#right{float:right;width:100px;}#center{mar

P粉291886842 · Answer

Use Flexbox to align three divs horizontally

This is a CSS3 way to horizontally align a div within another div.

#container {
  display: flex;                  /* 建立flex容器 */
  flex-direction: row;            /* 默认值；可以省略 */
  flex-wrap: nowrap;              /* 默认值；可以省略 */
  justify-content: space-between; /* 从默认值（flex-start）切换 */
  background-color: lightyellow;
}
#container > div {
  width: 100px;
  height: 100px;
  border: 2px dashed red;
}

jsFiddle

justify-content attribute has five values:

flex-start (default)
flex-end
center
space-between
space-around

In all cases, the three divs are on the same line. For a description of each value, see: https://stackoverflow.com/a/33856609/3597276

Benefits of flexbox:

Low amount of code, very efficient
Vertical and horizontal centering is very simple
Contour columns are very simple
Multiple options for aligning flex elements
Responsive
Unlike floats and tables, floats and tables have limited layout capabilities because they are never used to build layouts, Flexbox is a modern (CSS3) technology with a wide range of options.

Learn more about flexbox:

Methods to align Flex items
Use CSS Flexbox ~ MDN
The Complete Guide to Flexbox ~ CSS-Tricks
What is Flexbox? ! ~ YouTube video tutorial

Browser Support: Flexbox is supported by all major browsers, except IE < 10. Some recent browser versions, such as Safari 8 and IE10, require the vendor prefix . To quickly add a prefix, use Autoprefixer. See this answer for more details.

P粉029057928 · Answer

Using this CSS, place your div as follows (float first):

Note: You can also float the right first, then the left, and then center. It is important that the floating content comes before the "main" center section.

Note: Usually you will want to add this code at the end of #container:

< /div>, it will make the height of #container extend vertically to accommodate the floating content on both sides, instead of just being positioned from the height of #center, like this This prevents content on both sides from overflowing the bottom.