Разделение формы на 2 столбца

То, что я пытаюсь сделать, это разделить следующую форму на 2 столбца с вертикальным разделителем, разделяющим два, но, похоже, не могу понять это.

Вот изображение того, как я хочу, чтобы оно выглядело.

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

Пожалуйста помоги!


html css twitter-bootstrap
person ShadyPotato    schedule 12.02.2013    source источник
comment
Очень похоже на уже отвеченный stackoverflow.com/questions/9942538/   -  person xQbert    schedule 12.02.2013

Ответы (2)


arrow_upward
1
arrow_downward

Просто добавьте левый и правый div с display: inline-block и заданной шириной:

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

Вы запросили точную ширину, поэтому, если вы хотите предотвратить перенос, просто поставьте white-space: nowrap в форму. В противном случае используйте процентную ширину или что-то в этом роде.

person Explosion Pills    schedule 12.02.2013
comment
Просто чтобы добавить к этому. Скажем, ширина формы 1000 пикселей, левый столбец 640 пикселей, а правый столбец 300 пикселей. Как мне создать пространство между этими столбцами и добавить между ними вертикальный разделитель, растянувшийся на высоту формы? - person ShadyPotato; 12.02.2013

arrow_upward
0
arrow_downward

Сделайте пиксель 1px X 2px .. и примените его к вертикальному фону

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