Question

我的HTML网页上有三个<div>元素：

    <div id="main">

        <div id="bodyright" >
            here Right
        </div>

        <div id="bodycenter" >
            Here Center
        </div>

        <div id="bodyleft" >
            here left
        </div>

    </div>

file css

请注意，最右边的div首先列出，然后是中心div，然后是左侧。

当页面正常缩放（100％）时，我希望三个div元素彼此相邻，如下例所示：http://jsfiddle.net/hqak756s/
当页面放大时，我希望右侧div旁边的中心div和右侧div下方的左侧div。目前，它显示了中心div下方的左侧div。

我怎样才能使这个工作？

Answer 1

我建议使用boostrap来做这些事情，但是我为你创造了一些东西：

<style>
.table {
    width:100%;
    display: table;
    border-collapse: separate;
    border-spacing: 2px;
    border-color: gray;
}
.tbody{
    width:inherit;
    display: table-row-group;
    vertical-align: middle;
    border-color: inherit;
}
.tr{
    width:inherit;
    display: table-row;
    vertical-align: inherit;
    border-color: inherit;
}
.td{
    display: table-cell;
    vertical-align: inherit;
}
@media screen and (max-width: 600px) {
    .td{display:block;}
}
</style>
<div class="table">
    <div class="tbody">
        <div class="tr">
            <div class="td" style="background-color:green;">Left</div>
            <div class="td" style="background-color:red;">Centre</div>
            <div class="td" style="background-color:blue;">Right</div>
        </div>
    </div>
</div>

你可能会说我开始使用表格，但它的行为很奇怪所以我只创建了一堆div。效率不高但有效。请注意，这基本上是一个模板：我没有真正围绕您的代码进行风格化。

Float如何像twitter一样？

1 个答案: