Question

我正在将一堆表转换为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颜色，边框等）会消失，因为它现在的高度为0.

另外，我正在研究一个预先存在的代码，理想情况下我不想在javascript hacks中混乱太多，但如果我别无选择那么我会。那么，我该怎么办？

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 ; }

Answer 1

首先，请勿使用<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>

然后，对此有用的“hack”是设置包装器中通常位于Left的背景。像这样，看起来左边的样式是真正的包含样式的包装。

顺便说一句，不要去div.class，只需使用.class

Answer 2

我猜你需要用

包含花车

div.wrapper { overflow:hidden; }

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

编辑：要使用列复制100％高度，前面提到的简单方法是依靠仿列，在div.wrapper上设置背景图像（background：url（repeat.gif）repeat-y;）并杀死列上的100％高度，因为这不会产生任何影响。

Div不会与内容成比例扩展

2 个答案: