如何定位像表格嵌套的div

我想創建一個使用div和CSS的排序表。我認爲它看起來不錯，但是如果我複製下面的表格，它不再正確排列。如何定位像表格嵌套的div

HTML：

<div class="outer"> 
    <div class="main_right"> 
     <div class="top"> 
      <div class="top_right">top right</div> 
      <div class="top_left">top left</div> 
     </div> 
     <div class="bottom"> 
      <div class="right">right1</div> 
      <div class="left"> 
       <table> 
        <tr> 
         <td>left 1</td> 
         <td>left 2</td> 
        </tr> 
        <tr> 
         <td>left 1</td> 
         <td>left 2</td> 
        </tr> 
       </table> 
      </div> 
      <div class="right">right2</div> 
      <div class="left"> 
       <table> 
        <tr> 
         <td>left 1</td> 
         <td>left 2</td> 
        </tr> 
        <tr> 
         <td>left 1</td> 
         <td>left 2</td> 
        </tr> 
       </table> 
      </div> 
     </div> 
    </div> 
    <div class="main_left">main left</div> 
</div> 
<br>

CSS：

.outer { 
    width: 800px; 
} 
.main_left { 
    width:200px; 
    background:red; 
} 
.main_right { 
    float:right; 
    width:600px; 
} 
.top_left { 
    background:blue; 
    width: 400px; 
} 
.top_right { 
    background:purple; 
    float: right; 
    width:200px; 
} 
.left { 
    background:yellow; 
    width: 350px; 
} 
.right { 
    background:green; 
    float: right; 
    width: 250px; 
}

http://jsfiddle.net/mK9TQ/

我試圖獲得第二個紅色的「主力左」旁邊排隊到第二藍色的「頂剩下」。我希望每個「外部」div都是它自己的表格，這樣我就可以在垂直列表中複製儘可能多的空間，並在兩者之間留出空間。

我在CSS中丟失了什麼？

來源

2014-05-07 ss85

實際上，你可以這樣做沒有用，現在the display:table and related display types for elements.

唯一的區別是浮動你需要更改您的數據行>表的列設置，配合而不是什麼似乎是列>行你現在擁有的設置。

如果你只是想讓三列正確定位，你可以使用類似下面的東西來將每個內部div作爲列在外部div內定義。

div.outer { display:table-row} 
div.outer > div { display:table-cell}

來源

2014-05-07 04:09:06

你可以給float:left;到.main_left類，所以它會奏效。

.main_left { 
    width:200px; 
    background:red; 
    float:left; 
}

Here is Solution

來源

2014-05-07 04:17:16 Sandy

如何定位像表格嵌套的div

回答

相關問題