将表格分成2列

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

这是an image of what I want it to look like。

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); 
}

请帮帮忙！

来源

2013-02-12 ShadyPotato

非常相似，已经回答http://stackoverflow.com/questions/9942538/is-it-correct-to- use-div-inside-form – xQbert 2013-02-12 02:44:49

只需添加一个左边，并用display: inline-block右格和一组宽度：

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

您已要求精确的宽度，所以如果你想防止包装只是把white-space: nowrap形式。否则，使用百分比宽度或其他。

来源

2013-02-12 02:47:02

只需添加到此。假设表单的宽度为1000px，左栏为640px，右栏为300px。我将如何在这些列之间创建一个空间，并在它们之间添加一个垂直分隔符，以延伸到表单的高度？ – ShadyPotato 2013-02-12 19:26:07

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

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

来源

2013-02-12 16:36:34

将表格分成2列

回答

相关问题