Question

alt text 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的高度自动扩展，但我不知道如何。

Answer 1

我有一个非常简单的解决方案。在display: table-cell;＆amp;中使用css属性.left{} .right{}这样的风格：

    .left, .right { 

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

     }

参见演示：http://jsfiddle.net/rathoreahsan/qcCPG/3/

Answer 2

这是完全不同的风格：

.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% }

您可能希望在w3schools查看此CSS tutorials。

Answer 3

您还可以使用 FLEX 或将 FLEX 与 GRID

/******************************************
    1. FLEX
*******************************************/
.main{
    display: flex;
    flex-direction: row;
}
.left {
    width: 30%;
    align-self: center;
    text-align: center;
}
.right { 
    flex-grow: 1;
}
/******************************************
    2. FLEX with GRID
*******************************************/
.main{
    display: grid;
    grid-template-columns: 30% 1fr;
}
.left {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

玩得开心

自动扩展div高度

3 个答案: