Question

我正在设计一个页面，其中有两个左侧表格（一个在另一个下面），右侧有一个表格，中间有一个文本块。这是我尝试过的：

CSS：

#left {
    float:left;
    padding-right: ;
}

#right {
    float:right;
}

#center {
    margin-left: ;
    margin-right: ;
}

#text {
    width:60%;
    margin:0 auto;
}

HTML：

<body>

    <div id="left">
        <table style="width:; background-color:#>
        ...       
        </table>
        <table style="width:; background-color:#">
        ...
        </table>
    </div>

    <div id="right">
        <table>
        ...
        </table>
    </div>

    <div id="center">
        <div id="text">
            <h>My text goes here</h>
        </div>
    </div>

</body>

中间部分（文本）出现在页面中间，但它正好位于这三个表（左侧和右侧）之间，而不是它们之间...我该如何修复它？

谢谢！

Answer 1

你为什么要使用浮动？将div＃center放在div＃left和div＃right之间。给你的身体宽度。现在给div＃left，div＃right，div＃center widht = 33.33％，它应该工作。尝试一下。

Answer 2

想出来：

<div style="width: 70%;">
 <div style="float: left; width: 20%;">Table1 and Table 2</div>
 <div style="float: left; width: 60%;">My Text</div>
 <div style="float: left; width: 20%;">Table3</div>
 <br style="clear: left;" />
</div>

Answer 3

通过使用CSS3多列布局

找到了更有效的方法

http://msdn.microsoft.com/en-us/library/ie/hh673534(v=vs.85).aspx

Bootstrap有一个框架，只需将.col-md-N应用于你的div http://getbootstrap.com/examples/grid/

在两个表之间放置一个文本块

3 个答案: