Question

有人能想到一种方法来将以下方案转换为非表格html布局吗？

enter image description here

或许值得一提的一些事情。

只有中央区块强制性的（并且应该变成正常的方块如果是唯一的那个那里）。
块的总数是不可预测的，因此布局应该很容易扩展（因此非表格）。
完全左对齐文本所有街区并不重要。
不允许显示以外的间隙
灰色背景可以是半透明的，所以也不允许重叠。

提前致谢！

Answer 1

好吧..这很难:) ..顺便说一句，如果里面的文字是'静态'，你可以用浮点数和负边距这样做一些技巧：

http://www.jsfiddle.net/steweb/Xa5X6/

我知道这不是最好的结果，但它可能是一种开始的方式：）

标记：

<div class="wrapper">
    <div class="column">
        <div id="sq-1"></div>
        <div id="rect-1"></div>
    </div>
    <div class="column">
        <div id="sq-2"></div>
        <div id="rect-2"></div>
    </div>
    <div class="column main">
        <div class="text-container-1">
            <div class="text-1">
                text 
            </div>
            <div class="text-2">
                text 
            </div>
        </div>
        <div class="text-3">text </div>
        <div class="text-4">text</div>
        <div class="text-5">text</div>
    </div>
</div>

的CSS：

.wrapper{
    overflow:hidden;
    background:#777;
    display:inline-block;
}
.column{
    float:left;
}
#sq-1{
    width:20px;
    height:21px;
}
#sq-2{
    width:20px;
    height:21px;
    margin-top:20px;
    border-top:2px solid #FFFFFF;
}
#rect-1{
    height:104px;
    border-right:2px solid #FFFFFF;
}
#rect-2{
    height:82px;
    border-right:2px solid #FFFFFF;
}

.text-container-1{
    width:200px;
    border-right:2px solid #FFFFFF;
}
.text-1, .text-2{
    border-bottom:2px solid #FFFFFF;
}
.text-3{
    float:left;
    width:220px;
    margin-top:-44px;
    padding-top:54px;
    padding-bottom:10px;
    border-bottom:2px solid #FFFFFF;
    border-right:2px solid #FFFFFF;
}
.text-4{
    float:left;
    width:240px;
    margin-left:-222px;
    margin-top:-44px;
    padding-top:84px;
    border-bottom:2px solid #FFFFFF;
    border-right:2px solid #FFFFFF;
}
.text-5{
    float:left;
    width:260px;
    margin-left:-242px;
    margin-top:-44px;
    padding-top:104px;
    border-bottom:2px solid #FFFFFF;
    border-right:2px solid #FFFFFF;
}

在此示例中，您必须为左侧的元素指定静态高度。此外，右边元素的负边缘也是静态的。

static text =＆gt;静态尺寸/边距=＆gt;一种奇怪的结果

如果文本是动态的，我认为在不使用JS和/或表格的情况下实现结果几乎是不可能的，因为这些“L”元素及其宽度/高度很难管理。

动态文字=＆gt;发誓

Answer 2

解决了，但不是完美的动态边距（为js / php /中的每个元素计算）和需要动态计算高度的窄元素。

enter image description here

截图：

enter image description here

Answer 3

使用绝对定位并通过div的zindex将div分层

Answer 4

定义用于添加每个组件的CSS模板。一个用于垂直部分而另一个用于水平部分作为L形状是不可能直接的，并根据您的要求动态添加它们。

Answer 5

我认为你应该有一个包装器，在里面，你应该为每个文本层声明一个单独的div。左边浮动，一些边距将解决这个问题。尝试声明每个div嵌套，以便div可以相应扩展。

棘手的HTML布局

5 个答案: