горизонтальное выравнивание divs c в контейнере div

Question

Я хочу, чтобы 4 div были выровнены по горизонтали в родительском div. Родительский div имеет ширину: 100%;

Все дочерние div имеют ширину: 20%; Я хочу, чтобы оставшиеся 20% были пустым пространством, равномерно распределенным между ними (около 7% между каждыми двумя элементами).

Я пробовал этот код:

<div id="header" style="position:absolute; width:90%; border:2px solid black;">
    <div id="h_left" style="left:0; border:1px dotted black; width:20%;"> Left side material </div>
    <div id="h_center1" style="margin:auto; border:1px dotted black; width:20%;"> Center 1 material </div>
    <div id="h_center2" style="margin:auto; border:1px dotted black; width:20%;"> Center 2 material </div>
    <div id="h_right" style="right:0; border:1px dotted black; width:20%;"> Right side material </div>
</div>

Но это приводит к очень разочаровывающий результат:

Как я могу улучшить свой код, чтобы все элементы DIV были выровнены соответственно с равным интервалом между ними?

Answer 1

Упростите использование flex и создайте содержимое justify-between, чтобы выровнять пространство между кнопками точно так же:

1. flex
2. Justity-между

Вы также можете попробовать использовать свойство justify-around, если вы go перейдете по вышеуказанным ссылкам, которые помогут вам выбрать то, что вам нужно.

#header {
  border: 1px solid black;
  width: 100%;
  display: flex;
  justify-content: space-between;
}

#h_left {
  border: 1px dotted black;
  width: 20%;
}

#h_center1 {
  border: 1px dotted black;
  width: 20%;
}

#h_center2 {
  border: 1px dotted black;
  width: 20%;
}

#h_right {
  border: 1px dotted black;
  width: 20%;
}

<div id="header">
  <div id="h_left"> Left side material </div>
  <div id="h_center1"> Center 1 material </div>
  <div id="h_center2"> Center 2 material </div>
  <div id="h_right"> Right side material </div>
</div>

Answer 2

Div - это дисплей block по стандарту. Это означает, что каждый будет на своей линии. Я рекомендую пройти 1 час бесплатного начального курса на CSS, который поможет вам со всеми этими допущениями.

Вы можете делать то, что хотите, чтобы стилизовать это, есть много вариантов. Но я рекомендую гибкую коробку. Flex box и Grid станут вашими друзьями в CSS. Вот простое руководство Я все еще ссылаюсь.

    <div
      style="display: flex; justify-content: space-between; position:absolute; width:90%; border:2px solid black;"
    >
      <div id="h_left">Left side material</div>
      <div id="h_center1">Center 1 material</div>
      <div id="h_center2">Center 2 material</div>
      <div id="h_right">Right side material</div>
    </div>

вот код CodeSandbox , который показывает

Answer 3

Использование justify-content: space-between:

#header {
  width: 100%;
  border: 2px solid black;
  justify-content: space-between;
  display: flex;
}

#header > div {
  width: 20%;
  border: 1px dotted black;
}

<div id="header">
  <div id="h_left"> Left side material </div>
  <div id="h_center1"> Center 1 material </div>
  <div id="h_center2"> Center 2 material </div>
  <div id="h_right"> Right side material </div>
</div>

Answer 4

Вы можете попробовать это:

<div id="header" style="position:absolute; width:90%; border:2px solid black;">
    <div id="h_left" style="left:0; border:1px dotted black; width:20%; float: left;"> Left side material </div>
    <div id="h_center1" style="margin-left:6.6%; border:1px dotted black; width:20%; float: left;"> Center 1 material </div>
    <div id="h_center2" style="margin-left:6.6%; border:1px dotted black; width:20%; float: left;"> Center 2 material </div>
    <div id="h_right" style="right:0; border:1px dotted black; width:20%; float: right;"> Right side material </div>
</div>