Как сделать родительский контейнер таким же большим, как дети?

Я делаю таблицу из divs. Причина, по которой я использую div, заключается в том, что таблица может быть не такой отзывчивой, как я хочу.

В любом случае я сделал этот контейнер, который должен иметь ширину дочерних и центрированную, однако по какой-то причине он решил быть больше, несмотря на то, что ширина не установлена. Есть идеи как это исправить?

.wrapper {
  transform: translate(-50%, 0);
  margin-left: 50%;
  height: 100%;
  background-color: purple;
}

.wrapper div {
  background-color: cornflowerblue;
  width: 150px;
  height: 150px;
  display: block;
  float: left;
  margin: 10px;
}
<body style="margin: 0; height: 100vh; width: 100vw;">
  <section class="wrapper">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </section>
</body>

Источник

4 ответа

Это твои поплавки. Если вы хотите, чтобы контейнер "содержал" div, вы должны "плавать", используя либо float для самого контейнера, либо встроенный блок.

Я бы предложил использовать display:inline-block

Попробуйте это:

.wrapper {
  display: inline-block;
  background-color: purple;
  margin: 0px auto;
  max-width: 280px;
  padding: 0;
}

.wrapper div {
  background-color: cornflowerblue;
  width: 120px;
  height: 120px;
  display: block;
  float: left;
  margin: 10px;
}

Это приведет к тому, что ваш контейнер будет фактически содержать элементы внутри него. Кроме того, вам нужно будет добавить максимальную ширину в контейнер, чтобы убедиться, что у вас нет шатких отступов справа. Возможно, вы захотите использовать некоторые медиа-запросы, чтобы настроить их так, чтобы они выглядели правильно для каждого размера.

@media screen AND (max-width: 300px) {
    .wrapper {
        max-width: 280px;
    }
}
Источник

Проблема в том, что все дети вашего .wrapper div являются плавающими, в результате чего их родительская высота равна 0. Вы можете просто исправить это, установив overflow:hidden на упаковочном контейнере, если вам нужно, чтобы они были плавающими (вы также можете использовать display:inline-block вместо float:left и не требует свойства переполнения).

.wrapper {
  transform: translate(-50%, 0);
  margin-left: 50%;
  background-color: purple;
  overflow: hidden;
}

.wrapper div {
  background-color: cornflowerblue;
  width: 150px;
  height: 150px;
  display: block;
  float: left;
  margin: 10px;
}
<body style="margin: 0; height: 100vh; width: 100vw;">
  <section class="wrapper">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </section>
</body>

Источник

Установите для div обёртки отображение: inline-block;

HTML

  <section class="wrapper">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </section>
</body>

CSS

.wrapper {
  display: inline-block;
  background-color: purple;
}

.wrapper div {
  background-color: cornflowerblue;
  width: 120px;
  height: 120px;
  display: block;
  float: left;
  margin: 10px;
}

Codepen

Источник

Это не относится к вашему конкретному коду, но вы упомянули попытку создания таблиц с DIV. Вы могли бы использовать display: table | table-row | table-cell;,

Вот один из способов реализовать это:

.table {
  display: table;
}
.tr {
  display: table-row;
}
.td {
  display: table-cell;
}
.example {
  width: 50%;
}
.example .td {
  text-align: center;
  border: 1px solid #CCC;
}
<div class="table example">

  <div class="tr">
    <div class="td">
      A
    </div>
    <div class="td">
      B
    </div>
    <div class="td">
      C
    </div>
  </div>

  <div class="tr">
    <div class="td">
      D
    </div>
    <div class="td">
      E
    </div>
    <div class="td">
      F
    </div>
  </div>

</div>

Вы также можете изменить CSS так, как показано ниже, если вы не хотите добавлять класс CSS к каждому элементу:

.table {
  display: table;
}
.table > div {
  display: table-row;
}
.table > div > div {
  display: table-cell;
}
Источник
Другие вопросы по тегам