在兩個表格之間放置一段文字

我正在設計一個頁面，該頁面有兩個左側的表格（一個在另一個的下面），右側的一個表格和中間的文本塊。以下是我已經試過：在兩個表格之間放置一段文字

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

在兩個表格之間放置一段文字

回答

相關問題