在两个表格之间放置一段文字

我正在设计一个页面，该页面有两个左侧的表格（一个在另一个的下面），右侧的一个表格和中间的文本块。以下是我已经试过：在两个表格之间放置一段文字

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>

中央部分（文本）出现在页面的中间，但它是正确的下三张桌子（左侧和右侧），不在他们之间......我该如何解决它？

谢谢！

来源

2014-09-02 Yulix

我在中间看到它，并且第一个和第二个表重叠：http://jsfiddle.net/72t0mjmf/ – 2014-09-02 21:32:32

你为什么使用float？把div＃中心放在div＃left和div＃之间。给你的身体宽度。现在给div＃左，div＃右，div＃center widht = 33.33％，它应该工作。试试看。

来源

2014-09-02 23:00:21

没有工作。我删除了花车，并给所有divs 33.33％的宽度。现在一切都在彼此“Table1，Table2”之下，然后是“Mytext”，然后是“Table 3”。这不是因为页面的宽度。 – Yulix 2014-09-03 17:27:56

想通了：

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

来源

2014-09-04 17:30:53 Yulix

恭喜:) – 2014-09-05 18:10:52

发现外面有更有效的方式使用CSS3多栏布局

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

引导有一个框架，只是采用.COL-MD- N to your div http://getbootstrap.com/examples/grid/

来源

2014-09-16 22:42:48 Yulix

在两个表格之间放置一段文字

回答

相关问题