Div не расширяется пропорционально содержанию - PullRequest
Новая
       9

Div не расширяется пропорционально содержанию

2 голосов
/ 02 августа 2009

Я конвертирую кучу таблиц в div, сама структура очень проста, и до сих пор она отлично работает как в ie, так и в ffx. НО, когда содержимое div не подходит, оно вырастает из него и выталкивает все после него ... в других работах делает беспорядок Раскладка такая, 

<div class="wrapper">
    <div class="left">picture</div>
    <div class="right">
        <div class="title"> title</div>
        <div class="content">body</div>
    </div>
 </div>

Справа перемещается вправо, заголовок идет вверху справа, а контент находится под ним, слева плавает влево и охватывает высоту справа (изначально это был интервал строк = 2). проблема заключается в обертке, которая должна иметь фиксированную высоту, потому что у ее родителя нет (поэтому я не могу использовать%), а поскольку содержимое динамическое, я заранее не знаю, какая высота мне нужна. Если я избавлюсь от высоты, div расширяется, но стиль div (bg color, border и т. Д.) Исчезает, потому что теперь он имеет высоту 0.

Кроме того, я работаю над уже существующим кодом, который, в идеале, я не хочу слишком сильно загромождать взломами javascript, но если у меня нет выбора, тогда я сделаю это. Итак, что я могу сделать? 

div.wrapper{ height: 150px ; width: 100% ; } 

div.left{ height: 100% ; float: left ; width: 25% ; text-align: center ; } 

div.right{ float: right ; height: 100% ; } 

div.title{ width: 100% ; height: 50px ; } 

div.content{ width: 100% ; height: 100px ; text-align: center ; }

Ответы [ 2 ]

3 голосов
/ 02 августа 2009

Во-первых, не используйте <div class="title">, используйте <h1>.

При этом я бы сказал, что вы можете попробовать поиграть со свойством height ... но без CSS трудно сказать, что происходит.

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

РЕДАКТИРОВАТЬ:

Хорошо, после просмотра CSS, я бы сказал, что вам нужно добавить следующее: оба в конце оболочки как таковые: 

<div class="wrapper">
    <div class="left">picture</div>
    <div class="right">
        <div class="title"> title</div>
        <div class="content">body</div>
    </div>
    <div style="clear both;"></div>
 </div>

Тогда «взлом», который сработал бы для этого, это установить фон, который обычно был бы слева в оболочке. Таким образом, будет выглядеть, что левый стиль стилизован, если на самом деле это оболочка, которая содержит стиль.

Кстати, не делайте div.class, просто используйте .class

0 голосов
/ 02 августа 2009

Полагаю, вам нужно будет содержать числа с плавающей запятой 

div.wrapper { overflow:hidden; }

Но было бы полезно, если бы вы на самом деле вставили немного CSS.

Редактировать: Реплицировать высоту 100% со столбцамипростой способ, как упоминалось ранее, это полагаться на искусственные столбцы, установить фоновое изображение на div.wrapper (background: url (repeat.gif) repeat-y;) и убить 100% высоту столбцов, потому что это не будет иметьлюбой эффект.

...