0

編集：これは、現在人々の助けに基づいているように見えるJFiddleですが、まだ少し作業が必要です。

私は12のdivと1つのコンテナdivを持っています。コンテナdiv内の12個のdivは、6個のテキストと6個の対応する入力フィールドを構成します。

こんな感じにしたいのですが…

[Text1    Input Item1       Text2   Input Item2       Text3   Input Item3]
[Text4    Input Item4       Text5   Input Item5       Text6   Input Item6]

これをCSSでフォーマットする最良の方法は何ですか？私はそれを試してみました、そしてそれはただあちこちに行き渡ります、箱はずれていて、間違った列に置かれます。誰かがこれを手伝ってもらえますか？

<div class="container">
     <div class="text1"></div>
     <div class="InputItem1"></div>

     <div class="text2"></div>
     <div class="InputItem2"></div>

     <div class="text3"></div>
     <div class="InputItem3"></div>

     <div class="text4"></div>
     <div class="InputItem4"></div>

     <div class="text5"></div>
     <div class="InputItem5"></div>

     <div class="text6"></div>
     <div class="InputItem6"></div>
</div>

CSSコード：

.container{width:100%;}

.text1{width:15%;float:left}
.InputItem1{width:15%;float:left}       

.text2{width:15%;float:center}
.InputItem2{width:15%;float:center}       

.text3{width:15%;float:right}
.InputItem3{width:15%;float:right}       

.text4{width:15%;float:left}
.InputItem4{width:15%;float:left}       

.text5{width:15%;float:center}
.InputItem5{width:15%;float:center}       

.text6{width:15%;float:right}
.InputItem6{width:15%;float:right}
4

2 に答える 2

2

これが始まりです：jsFiddleの例

HTML

<div class="container" name="container">
     <div class="textitem" name="text1">t</div>
     <div class="inputitem" name="InputItem1">i</div>

     <div class="textitem" name="text2">t</div>
     <div class="inputitem"  name="InputItem2">i</div>

     <div class="textitem" name="text3">t</div>
     <div class="inputitem"  name="InputItem3">i</div>

     <div class="textitem clear" name="text4">t</div>
     <div class="inputitem"  name="InputItem4">i</div>

     <div class="textitem" name="text5">t</div>
     <div class="inputitem"  name="InputItem5">i</div>

     <div class="textitem" name="text6">t</div>
     <div class="inputitem"  name="InputItem6">i</div>
</div>​

CSS

.container{width:100%;overflow:auto;}
div {
    border:1px solid #999;
}

.inputitem,.textitem {
    float:left;  
    width:15%;    
}

divをより見やすくするために境界線を追加したことに注意してください。

于 2012-09-19T16:50:02.070 に答える
0

@GionaFは正しいですが、cssを機能させるには、名前ではなくクラスを設定する必要があります。

<div class="container">
     <div class="text1"></div>
     <div class="InputItem1"></div>

     <div class="text2"></div>
     <div class="InputItem2"></div>

     <div class="text3"></div>
     <div class="InputItem3"></div>

     <div class="text4"></div>
     <div class="InputItem4"></div>

     <div class="text5"></div>
     <div class="InputItem5"></div>

     <div class="text6"></div>
     <div class="InputItem6"></div>
</div>
于 2012-09-19T16:52:13.240 に答える