Question

我试图建立一个电网,使内部的“电网”能够有活力的高度,但同时又保持每个“细胞”的边界。我无法想出一种方式来做到这一点,而这样做将牵涉新的 ha,需要一些帮助。

下面的图谋解释了我过去和现在所尝试的:

http://tinypic.com/r/111mpsn/5”

理想情况:

No table because of rendering reasons, although it would certainly work
Should be IE6/IE7-friendly

Answer 1

Tables would be the ideal solution, but as you mentioned aren t valid for you in this instance.

<代码>显示:表格-cell;也不适用于您,因为IE6/7不支持。

Your best bet would be to follow something like the method outlined here. In essence, you will need to create a wrapping row div for each cell with a right border (Or any other styles you want) and then relatively position them to the left an amount equal to the width of the cell. Not a pretty solution, but it is a hard problem to solve otherwise.

或者,请将faux栏目。桌子的边境(如果你想要的话,背景)确实只是背景形象的一部分,并且纵向重复。这将是更简单的超文本和特别安全局的明智之举,但需要把形象从风格上抹去,如果你想要改变的话,这种形象就会是巨大的痛苦。

Answer 2

这是一种幻觉,但它在IE9、FF、 Chrome、Sato(最后三个也是关于Mac版本的)开展工作。

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
    <style type="text/css">
        .containerDiv {
            border-left: 1px solid black;
            border-bottom: 1px solid black;
            width: 903px;
        }
        .rowDiv {
            border-top: 1px solid black;
        }
        .cellDiv {
            border-right: 1px solid black;
            display: table-cell;
            width:300px;
            padding: 4px;
        }
    </style>
</head>

<body>
    <div class="containerDiv">
        <div class="rowDiv">
            <div class="cellDiv">This is some text.</div>
            <div class="cellDiv">This is some text. This is some text. This is some text. This is some text.</div>
            <div class="cellDiv">This is some text.</div>
        </div>
        <div class="rowDiv">
            <div class="cellDiv">This is some text.</div>
            <div class="cellDiv">This is some text.</div>
            <div class="cellDiv">This is some text. This is some text. This is some text. </div>
        </div>
        <div class="rowDiv">
            <div class="cellDiv">This is some text.</div>
            <div class="cellDiv">This is some text. This is some text. This is some text. This is some text.</div>
            <div class="cellDiv">This is some text.</div>
        </div>
        <div class="rowDiv">
            <div class="cellDiv">This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.</div>
            <div class="cellDiv">This is some text.</div>
            <div class="cellDiv">This is some text. This is some text. This is some text. </div>
        </div>
    </div>


</body>
</html>

计数是建立<代码>.cellDiv divs to display: table-cell。你们还必须给他们一个 w。主要集装箱码头面积比内陆码头宽3个。说明边界是如何被操纵的,只有一条线是显而易见的。

友情链接