如何使用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布局表格

回答

相关问题