Html и CSS как я могу выровнять 3 divs бок о бок

Ответ 1

Все элементы в одной строке

Оберните элементы div в обертку:

<div id="wrapper">
  <div id="first">first</div>
  <div id="second">second</div>
  <div id="third">third</div>
</div>

Затем установите ширину обертки и поплавьте все три div s:

#wrapper {
  width:700px;
  clear:both;
}
#first {
  background-color:red;
  width:200px;
  float:left;
}
#second {
  background-color:blue;
  width:300px;
  float:left;
}
#third {
  background-color:#bada55;
  width:200px;
  float:left;
}

Кроме того, используйте идентификаторы и/или классы и сохраняйте CSS отдельно от HTML. Это упрощает чтение и обслуживание кода.

fiddle.

Все элементы в одной строке, одинаковая высота

Чтобы выполнить "ту же высоту", вы можете использовать display:table, display:table-row и display:table-cell для получения совпадающих высот. Он использует дополнительный div, поэтому HTML выглядит так:

<div id="wrapper">
  <div id="row">
    <div id="first">first</div>
    <div id="second">second<br><br></div>
    <div id="third">third</div>
  </div>
</div>

Затем поплавки можно удалить, поэтому CSS выглядит следующим образом:

#wrapper {
  display:table;
  width:700px;
}
#row {
  display:table-row;
}
#first {
  display:table-cell;
  background-color:red;
  width:200px;
}
#second {
  display:table-cell;
  background-color:blue;
  width:300px;
}
#third {
  display:table-cell;
  background-color:#bada55;
  width:200px;
}

fiddle.

Flexbox Путь

Если вы поддерживаете только новые браузеры (IE 10 и выше), Flexbox - еще один хороший выбор. Для лучшей поддержки обязательно используйте префикс. Подробнее о префиксах можно найти здесь.

HTML

<div class="container">
  <div class="first">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
  <div class="second">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil ratione rerum deserunt reiciendis numquam fugit dolor eligendi fuga sit. Hic, tempore. Error, temporibus possimus deserunt quisquam rerum dolor quam natus.Fugiat nam recusandae doloribus culpa obcaecati facere eligendi consectetur cum eveniet quod et, eum, libero esse voluptates. Ut commodi consequuntur eligendi doloremque deserunt modi animi explicabo aperiam, non, quas qui!</div>
  <div class="third">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet obcaecati, rem. Ullam quia quae, ad, unde saepe velit incidunt, aliquid eum facere obcaecati molestiae? Repellendus tempore magnam facere, sint similique!</div>
</div>

CSS

.container {
  display:flex;
  justify-content:center;
}
.container > div {
  margin:10px;
  background-color:#bada55;
}
.first, .third {
  width:200px;
}
.second {
  width:300px;
}

Codepen.

Сеткa >

Вы можете выполнить это с помощью grid, хотя поддержка браузера может быть проблемой, если вы поддерживаете старые браузеры. Это тот же HTML-код, что и с примером Flexbox, только с другим CSS:

CSS

.container {
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  grid-column-gap: 10px;
  width:700px;
}
.container > div {
  background-color:#bada55;
}
.first, .third {
  width:200px;
}
.second {
  width:300px;
}

codepen.

Ответ 2

Код HTML

<div id="wrapper">
  <div id="first">first</div>
  <div id="second">second</div>
  <div id="third">third</div>
</div>

CSS будет

#wrapper {
  display:table;
  width:100%;
}
#row {
  display:table-row;
}
#first {
  display:table-cell;
  background-color:red;
  width:33%;
}
#second {
  display:table-cell;
  background-color:blue;
  width:33%;
}
#third {
  display:table-cell;
  background-color:#bada55;
  width:34%;
}

Этот код будет работать в ответном макете, поскольку он изменит размер

<div> 

в соответствии с шириной устройства. Даже кто-то может молчать кого-нибудь

<div>

а

<!--<div id="third">third</div> --> 

и может использовать остальные два для двух

<div> 

бок о бок.