如何使用CSS div佈局模仿colspan = 2佈局表格

我有一個表格佈局--3個單元格。左右佔用100px，中間是自動大小。如何使用CSS div佈局模仿colspan = 2佈局表格

我想創建一個「行」，將其拆分爲2個50％的「單元格」，並將每個「單元格」中現有的3個單元格行中的一個放入其中。

壞冠軍，但很難形容，但這裏是我迄今爲止的DIV佈局，再下面我試圖重現的表格佈局：

<!DOCTYPE html> 
<html> 
<head> 
<title></title> 

    <style> 

    .container { width: 800px; margin: 0 auto; } 
    p { 
     display:table; 
     width: 100%; 
     margin: 10px 0; 
    } 
    .left { 
     display:table-cell; 
     width: 100px; 
     background-color: black; 
    } 
    .mid { 
     display:table-cell; 
     width: auto; 
     background-color: red; 
    } 
    .right { 
     display:table-cell; 
     width: 100px; 
     background-color: green; 
    } 


    table { width: 100% } 

    </style> 
</head> 

<body> 

     <div class="container"> 

      <h1>DIV</h1> 

      <!-- one half --> 

      <p> 
       <span class="left">aaa</span> 
       <span class="mid">aaa</span> 
       <span class="right">aaa</span> 
      </p> 
      <!-- /one half --> 
      <!-- one half --> 
      <p> 
       <span class="left">bbb</span> 
       <span class="mid">bbb</span> 
       <span class="right">bbb</span> 
      </p> 
      <!-- /one half --> 
      <p> 
       <span class="left">ccc</span> 
       <span class="mid">ccc</span> 
       <span class="right">ccc</span> 
      </p> 



     <h1>TABLE</h1> 

     <table> 
      <tr> 
       <td width="50%"> 
        <table> 
         <tr> 
          <td class="left">aaa</td> 
          <td class="mid">aaa</td> 
          <td class="right">aaa</td> 
         </tr> 
        </table> 
       </td> 
       <td width="50%"> 
        <table width="100%"> 
         <tr> 
          <td class="left">aaa</td> 
          <td class="mid">aaa</td> 
          <td class="right">aaa</td> 
         </tr> 
        </table> 
       </td> 
      </tr> 
      <tr> 
       <td colspan="2"> 
        <table> 
         <tr> 
          <td class="left">ccc</td> 
          <td class="mid">ccc</td> 
          <td class="right">ccc</td> 
         </tr> 
        </table> 
       </td> 
      </tr> 
     </table> 
    </div> 
</body> 
</html>

http://jsfiddle.net/RmaKW/2/

我想我可以用簡單的float：left，width：50％div來包裝前兩個「行」，但沒有任何運氣。

來源

2013-05-10 user210757

你必須設置爲100％p標籤的寬度 - 也許設定爲P的寬度用float：left標記到50％，並給它一個「spanned」類，它將寬度設置爲100％？ – orangeale 2013-05-10 18:38:52

是的，這回答我的問題。我試圖爲這個問題做一個簡單的例子，但它沒有捕獲我的問題。中間的單元格有一個我想填充這個空間的選擇輸入（自定義的jquery控件），當選定的文本很長時，不再是溢出的橢圓，它總是擴展爲全文。我要去嘗試另一個問題 – user210757 2013-05-13 21:50:24

這裏是我更新的問題：http://stackoverflow.com/questions/16532835/how-to-hide-overflow-on-select2 – user210757 2013-05-13 23:38:31

你的意思是這樣的嗎？

http://jsfiddle.net/coma/YvTXT/1/

HTML

<div class="doo"> 
    <div class="foo"> 
     <div></div> 
     <div></div> 
     <div></div> 
    </div> 
    <div class="foo"> 
     <div></div> 
     <div></div> 
     <div></div> 
    </div> 
</div>

CSS

div.doo > div { 
    float: left; 
    width: 50%; 
} 

div.doo:after { 
    content: ""; 
    display: block; 
    clear: both; 
} 

div.foo { 
    position: relative; 
    min-height: 300px; 
    background-color: #eee; 
} 

div.foo > div:first-child, div.foo > div:last-child { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    width: 100px; 
    background-color: #333; 
} 

div.foo > div:first-child { 
    left: 0; 
} 

div.foo > div:last-child { 
    right: 0; 
} 

div.foo > div:nth-child(2) { 
    padding: 0 100px; 
}

來源

2013-05-10 20:29:33 coma

如何使用CSS div佈局模仿colspan = 2佈局表格

回答

相關問題