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

У меня есть следующий HTML:Как сделать div настолько широким, как его родной брат, но не шире?

<div class="wrapper"> 
    <div class="label"> 
    foor bar baz 
    </div> 
    <img src="..."> 
</div>

Да, я знаю, что DIV с классом «ярлык» должен быть ярлык.

Простой вопрос: как я могу обеспечить, чтобы метка всегда была такой же широкой, как и изображение, и никогда не была более широкой? Ширина изображения и содержимого метки неизвестны. Когда содержание метки больше ширины изображения, оно должно перейти к следующей строке.

Прямо сейчас у меня есть «display: inline-block» для обертки, и все отлично выглядит, когда текст подходит к метке. Если текст длиннее, он не сломается, но делает метку длиннее изображения.

Я думаю, что для этого есть простое решение, но я просто не вижу его. Любая помощь ценится!

источник

2010-06-28 Manuel Meurer

Он должен быть только элементом метки, если он начерчивает элемент управления формой. – Joey

Я думаю, что это не правильный ответ, поэтому я помещаю его здесь: я думаю, что любая ширина в процентном модуле наследует ширину div отца, поэтому, если вы поместите ширину метки на 100%, она будет такой же широкой, как и отец div. У этого проблемы есть проблемы, поэтому используйте 99%. –

@Oscar Это будет работать, только если у отца div (обертка) указанная ширина. Если это не так, и я установил ширину метки div на 100%, она останется той же величины, как если бы я не установил ширину вообще. (Установка ширины до 90% делает ее на 10% меньше и т. Д.) –

элемент не может быть больше, чем его родительский, поэтому, если вы поместите тег img внутри div, он никогда не будет больше.

<div class="wrapper"> 
    <div class="label"> 
    foor bar baz 
    <img src="..."> 
    </div> 
</div>

источник

2010-06-28 21:11:07 Catfish

Да, конечно, это правильно. Я полностью удалю лейбл div и просто оставлю все в обертке. Благодаря! –

Дайте обоим элементам атрибут width:50%; (или ширина: 49% ;, только чтобы быть в безопасности), что должно сделать трюк.

источник

2010-06-28 21:10:23 DaClown

Я действительно не понимаю. Какие «оба» элемента вы имеете в виду? Как я уже сказал, ширина картинки неизвестна, и я не хочу ее менять. –

Я думаю, что OP предполагает, что вы хотите разделить div верхнего уровня на даже левый и правый секторы, а не выше и ниже секций. – ijw

(И видеть «49%, чтобы быть более безопасным» заставляет меня хотеть причинять вред людям, которые написали IE и ввернули умы поколения веб-дизайнеров.) – ijw

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

ответ

Смежные вопросы