0

私がやろうとしているのは、次のフォームを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);
}

助けてください！

4

2 に答える 2

1

display: inline-block幅を設定して左右の div を追加するだけです。

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

正確な幅を求めたので、折り返しを防ぎたい場合はwhite-space: nowrap、フォームに置くだけです。それ以外の場合は、パーセンテージ幅などを使用してください。

于 2013-02-12T02:47:02.190 に答える
0

ピクセルを 1px X 2px .. にし、垂直背景に適用します。

.form-large { 
    ...
    background:transparent url(1pxX2pximage.img) repeat-y scroll 0 584px;
    ...
}
于 2013-02-12T16:36:34.650 に答える