代码之家 › 专栏 › 技术社区 › blackbird

DIV未按内容比例展开

css-tables html

blackbird · 技术社区 · 17 年前

我正在将一堆表转换成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>

右向右浮动,标题在右上方,内容在其下方,左向左浮动,跨越右高度(最初是rowspan=2)。问题出在需要固定高度的包装器上,因为它的父级没有任何高度(所以我不能使用),而且由于内容是动态的,所以我事先不知道需要什么高度。如果去掉高度,DIV会展开,但是DIV的样式(bg颜色、边框等)会消失,因为它现在的高度为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 回复 | 直到 9 年前

marcgg 17 年前

首先,不要使用 <div class="title"> 使用 <h1> .

我想说你可以试着玩弄高度属性…但是如果没有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>

然后,适用于这种情况的“黑客”就是设置通常在包装器左侧的背景。像这样,当真的是包含样式的包装器时,左边看起来是样式化的。

顺便说一下,不要去上课,只要用上课。

meder omuraliev 17 年前

我猜你需要用

div.wrapper { overflow:hidden; }

但是如果你真的粘贴了一些CSS的话会有帮助的。

编辑:要用列复制100%的高度,前面提到的一种简单方法是依赖于人造列,请在div.wrapper(background:url(repeat.gif)repeat-y;)上设置背景图像,并取消列上100%的高度,因为这不会有任何效果。