html - 将表格分成 2 列

Question

我想要做的是将以下表格分成两列，垂直分隔线将两列分开，但似乎无法弄清楚。

这是我希望它看起来像的图像。

HTML：

<div class="container">  
  <form class="form-large">
    <!-- THIS FORM NEEDS TO BE SPLIT IN 2 COLUMNS SUCH THAT I CAN PUT CONTENT IN BOTH -->   
  </form>
</div>

CSS：

.form-large {
    max-width: 884px;
    padding: 15px 15px 10px;
    margin: 0 auto 20px;
    background-color: #fff;
    border: 1px solid #d6d6d6;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
    box-shadow: 0 1px 2px rgba(0,0,0,.05);
}

请帮忙！

Answer 1

只需添加一个左右 divdisplay: inline-block并设置宽度：

http://jsfiddle.net/ExplosionPIlls/eGjPa/

您已要求提供确切的宽度，因此如果您想防止包装，只需放在white-space: nowrap表格上即可。否则，使用百分比宽度或其他东西。

Answer 2

制作一个像素 1px X 2px .. 并应用它具有垂直背景

.form-large { 
    ...
    background:transparent url(1pxX2pximage.img) repeat-y scroll 0 584px;
    ...
}