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

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

html css

Html 在两个表之间放置一块文本,html,css,Html,Css,我正在设计一个页面，它有两个左边的表格（一个在另一个下面），右边还有一个表格，中间有一块文本。以下是我尝试过的： CSS: HTML: 你为什么用浮球？将div#居中置于div#left和div#right之间。给你的身体一个宽度。现在假设div左，div右，div中宽=33.33%，它应该有效。试试看。找到了： <div style="width: 70%;"> <div style="float: left; width: 20%;">Table1 and Tab

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

CSS:

HTML:


你为什么用浮球？将div#居中置于div#left和div#right之间。给你的身体一个宽度。现在假设div左，div右，div中宽=33.33%，它应该有效。试试看。
找到了：
<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>


表1和表2
我的文字
表3


发现使用CSS3多列布局有更有效的方法

Bootstrap有一个框架，只需将.col-md-N应用于您的div即可
我看到它在中间，第一张和第二张桌子重叠：不起作用。我删除了浮动，并给所有div分配了33.33%的宽度。现在一切都在彼此的“表1，表2”，然后是“我的文本”，然后是“表3”。这不是因为页面的宽度。
<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>

<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>