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

Question

Я ищу решение CSS для следующего: -

<div style="display:inline;">
     <div>The content of this div is dynamically created but will always be wider than
              the below div. 
     </div>
     <div> Need this div to have the same width as the above div.
     </div>
</div>

Оболочка div имеет встроенный дисплей и работает как положено, оба дочерних элемента div имеют динамически генерируемый контент. Мне нужен нижний, чтобы взять ширину предыдущего брата.

Большое спасибо за любые предложения заранее.

Answer 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>

Answer 2

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

Вот решение 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>

Answer 3

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

http://jsfiddle.net/CpKDX/

Answer 4

Если вы готовы отказаться от пары <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;

Answer 5

ОБНОВЛЕНИЕ: это работает со мной, я только что попробовал:

<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;)

---

Просто иди так:

Допустим, вы хотите, чтобы все div были максимальными. 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 ...

Answer 6

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

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

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

<div style="display:inline;">