автоматическое расширение высоты div - PullRequest
Новая
       9

автоматическое расширение высоты div

1 голос
/ 14 апреля 2010

альтернативный текст http://www.freeimagehosting.net/uploads/a33d47cb87.jpg

<html><head><title>Test</title>
<style>
.main{width:600px;border:1px solid red; }
.main .left{background:lightblue; width:100px;clear:both; float:left;}
.main .right{margin-left:100px;background:lightyellow; }
</style>
    </head><body>
<div class="main">
    <div class="left">
    title
    </div>
    <div class="right">
        <div id="item">item</div>
        <div id="item">item</div>
        <div id="item">item</div>
        <div id="item">item</div>
        <div id="item">item</div>
        <div id="item">item</div>
        <div id="item">item</div>
    </div>
</div>
</body></html>

Как изменить CSS, чтобы страница отображалась так, как показано в диалоговом окне?

PS, я думаю, что это способ сделать так, чтобы высота "левого" div автоматически увеличивалась при увеличении высоты "правого" div или родительского div, но я не знаю, как.

Ответы [ 2 ]

4 голосов
/ 18 июля 2011

У меня очень простое решение. Используйте атрибут css display: table-cell; в стиле .left{} & .right{} следующим образом: 

    .left, .right { 

         display: table-cell;
         width:100px; 
         vertical-align:middle; 
         text-align:center;

     }

См. Демонстрацию: http://jsfiddle.net/rathoreahsan/qcCPG/3/

0 голосов
/ 14 апреля 2010

Вот совершенно другой стиль, который работает: 

.main{width:600px;border:1px solid red; height:auto; position:relative }
.main > div {display:inline-block; vertical-align:top; }
.main .left{background:lightblue; width:100px; height: 100%; }
.main .right{margin-left:5px; background:lightyellow; height: 100% }

Возможно, вы захотите пройти эти уроки CSS в w3schools.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...