Родительский Плавающий Элемент не будет изменять размеры с дочерним узлом процента ширины - PullRequest
Новая
       12

Родительский Плавающий Элемент не будет изменять размеры с дочерним узлом процента ширины

0 голосов
/ 21 октября 2011

У меня есть плавающий родительский div, содержащий ребенка, использующего width: 30%.

Кажется, этот родительский div не изменится, если использовать процент в качестве единицы ширины, но он хорошо работает при использовании px или ems.

Можно ли каким-то образом заставить родительский div регулировать свою ширину при использовании width: 30%, так как я хотел бы иметь жидкую компоновку?

Пожалуйста, посмотрите на этот пример для более подробной информации: http://jsfiddle.net/sBzYH/

<div class='percent container'>
    <div>
        <h3>width: 30%</h3>
        <p>
            When using the child div
            with percent width, the floating
            parent div keeps expading 100%.
        </p>
    </div>
</div>

<div class='pixel container'>
    <div>
        <h3>width: 100px</h3>
        <p>
            When using the child div 
            with pixel width, the floating
            parent div resizes accordingly.
        </p>
    </div>
</div>

1 Ответ

0 голосов
/ 21 октября 2011

Родительский контейнер уже будет иметь жидкую ширину, потому что это div, по умолчанию он будет иметь полную доступную ширину, но вы можете явно ограничить это. Этот CSS сделает ваши два примера примерно одинакового размера: 

.container { 
    width: 66%; 
    min-width: 325px; 
}

Если для контейнера доступно больше (чуть меньше) 500px, то он расширится и займет 66% отдоступное пространство, но оно останется достаточно широким, чтобы дочерний элемент шириной 30% всегда имел ширину не менее 100 пикселей.

...