Установите div, чтобы ширина его брата и сестры

Ответ 1

Вот еще одно решение Flexbox, которое позволяет обернуть второго ребенка в соответствии с шириной брата переменной высоты.

.wrapper > div {
  border: 1px solid;
}

.child {
  display: flex;
}

.child div {
  flex-grow: 1;
  width: 0;
}

.wrapper {
  display: inline-block;
}

<div class="wrapper">
    <div>This div is dynamically sized based on its content</div>
    <div class="child"><div>This div will always be the same width as the preceding div, even if its content is longer (or shorter too).</div></div>
</div>

Ответ 2

Поплавки и таблицы 2000 и поздние. С сегодняшними браузерами мы можем сделать две дочерние DIVs друг другу шириной, независимо от того, что больше/меньше.

Здесь решение Flexbox подходит для 2016:

.wrapper {
  display: inline-block;
}

.parent {
  display: flex;
  flex-direction: column;
}

/* For visualization */
.child {
  border: 1px solid #0EA2E8;
  margin: 2px;
  padding: 1px 5px;
}

<div class="wrapper">
  <div class="parent">
    <div class="child">Child number one</div>
    <div class="child">Child #2</div>
  </div>
</div>

Ответ 3

Установите вместо этого div значение display:inline-block, таким образом ваш div будет расширяться с содержимым внутри него.

http://jsfiddle.net/CpKDX/

Ответ 4

UPDATE: Это работает со мной, я только что попробовал:

<div style="max-width:980px;border:1px solid red;">
   <div style="background:#EEE;float:left;">
     <div style="width:auto;border:1px solid blue;float:left;">If you use 100% here, it will fit to the width of the mother div automatically.</div>
     <div style="border:1px solid green;"> The div will be 100% of the mother div too.</div>
   </div>
     <div style="clear:both;"></div>
</div>

Это то, что вы хотите? Границы и фон - это просто показать divs;)

Просто пойдите так:

Скажем, вы хотите, чтобы все divs были максимальными. 980px (иначе просто оставьте это или замените на 100%)...

<div style="max-width:980px;">
     <div style="width:100%;">If you use 100% here, it will fit to the width of the mother div automatically.
     </div>
     <div style="width:100%;"> The div will be 100% of the mother div too.
     </div>
</div>

Второй вариант: использовать еще один div... или использовать style="width:auto;" для динамического div...

Ответ 5

Не уверен, понял ли я то, что вы пытаетесь сделать, но похоже, что установка 100% -ной ширины для последнего div должна работать:

<div style="width:100%;"> 

Кстати, стиль в первом div не определен правильно, вы должны использовать двоеточие вместо знака равенства в определении свойств:

<div style="display:inline;">

Ответ 6

Если вы готовы отказаться от пары <div>, то у меня есть решение для вас:

<div style="display: inline-block;">
<table>
<tr>
<td>The table automatically makes its siblings the same width</td>
</tr>
<tr>
<td>So this will be as wide</td>
</tr>
</table>
</div>

Не забудьте установить div display:inline-block;