代码之家 › 专栏 › 技术社区 › Geln Yang

自动展开div高度

css html

Geln Yang · 技术社区 · 14 年前

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使页面显示得像对话框显示的那样?

另外,我认为这是一种当“right”div或父div的高度展开时,使“left”div的高度自动展开的方法,但我不知道如何展开。

2 回复 | 直到 13 年前

Ahsan Rathod 13 年前

我有一个非常简单的解决办法。使用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/

Pablo 14 年前

以下是完全不同的风格:

.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 tutorials 在W3schools。

推荐文章

YunusoviÄ · 我无法用css更改html段落颜色

1 年前

Blake · 无法使用CSS旋转Angular 15中的字体图标

1 年前

Maarten -Monica for president · 将图像放在锚点标记内时调整网格中的图像大小

1 年前

Phil Lucks · 如何制作边界的外半径?

1 年前

roy_meir · 创建自定义下拉式元素

1 年前

Community wiki · 如何为触摸设备优化网站

1 年前

Paras Chandravanshi · 为什么<ul>没有从其父<p>元素继承?

1 年前

tpetzoldt · 如何在有光泽的情况下抑制图像的抗锯齿?

1 年前

boyenec · 反应如何将css样式应用于我从api respose获得的页面的spcifc部分

1 年前

manofconstsorrow · 点击导航项目关闭汉堡菜单

1 年前