將表格分成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列

回答

相關問題