2

我正在将一堆表格转换为 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 hack，但是如果我别无选择，那么我会的。那么，我能做些什么呢？

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

2 回答 2

3

首先，不要使用<div class="title">，使用<h1>。

话虽如此，我想说您可以尝试使用 height 属性...但是如果没有 CSS，很难说出发生了什么。

另一个技巧是在包装器上放置一个背景，以假装左 div 一直扩展到底部。Left 和 Right 以固定宽度左右浮动，看起来不错。

编辑：

好的，在看到 CSS 之后，我想说你想要做的是在包装器的末尾添加一个 clear:both ，如下所示：

<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”是设置通常在包装器中的左侧的背景。像这样，当它实际上是包含样式的包装器时，它看起来是样式化的。

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

于 2009-08-01T20:20:09.663 回答
0

我猜你需要包含浮动

div.wrapper { overflow:hidden; }

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

编辑：要使用列复制 100% 高度，如前所述，一种简单的方法是依赖人造列，在 div.wrapper 上设置背景图像（ background:url(repeat.gif) repeat-y; ）并杀死 100% 高度在列上，因为这不会有任何影响。

于 2009-08-01T20:19:07.343 回答