CSS Fluid Width внутри div с фиксированной шириной

Question

У меня есть два div внутри div обёртки шириной 880px.

Первый div содержит изображение любой ширины, я бы хотел, чтобы вторая ширина масштабировалась с ним, т.е.:

Div 1 = 300px Div 2 = 580px << этот div масштабируется по размеру родительского div. </p>

Установка ширины 100% для второго div игнорирует фиксированную ширину родительского div.

Возможно ли это с использованием только css или мне придется использовать javascript / jquery (jquery уже загружен, так что это не слишком большая проблема)?

Спасибо!

Answer 1

скопируйте / вставьте код ниже и попробуйте изменить ширину изображения и посмотрите, что произойдет.

<div style="width:880px;">
    <img style="float:left;margin-right:10px;width:600px;height:80px;" src="whatever" />
    <div>a sadasd wqe sad asdqwe qweqwedasdasdqwe qwe qwe </div>
    <div style="clear:both;"></div>
</div>

Answer 2

С помощью CSS вы можете устанавливать только те измерения, которые непосредственно относятся к содержимому элемента, например, к его родителям, размеру шрифта или разрешению экрана, но не к размерам его элементов. * Это означает, что в Чтобы второй блок имел ту же ширину, что и изображение, он должен «наследовать» ширину от родителя или динамически устанавливать его. Например:

#wrapper {
    float: left;
}

<div id="wrapper">
    <img id="image" src="…" alt="" />
    <div id="fits_img">…</div>
</div>

Свойство float в блоке #wrapper соответствует ширине его содержимого. Ширина блока #fits_img по умолчанию равна auto или 100% (поскольку это элемент div), поэтому его ширина будет соответствовать #wrapper и, следовательно, будет косвенно относительной к ширине изображения.

Если вы не можете сделать элемент #wrapper плавающим, вы также можете отразить ширину с помощью jQuery, например:

$(document).ready(function()
{
    $('#fits_img').width($('#image').width());
});

---

* Обратите внимание, что существуют также абсолютные единицы измерения, такие как "см", но они относительно бесполезны и используются редко.