1

次の HTML5 ページがあります (Windows ストア アプリ内):

<div>
    <textarea id="wideBox" class="wideInput"></textarea>        
    <textarea id="small1" class="narrowInput"></textarea>
    <textarea id="small2" readonly class="narrowInput"></textarea>
</div>

そして、次の CSS:

.wideBox {
    width: 100%;
    box-sizing: border-box;
    opacity: 80;
    height: 200px;
    background: -ms-linear-gradient(top, #213A4F, #1a82f7);
}

.narrowInput {
    width: 50%;
    box-sizing: border-box;
    height: 200px;
    float: left;
    padding: 5px;
    background: -ms-radial-gradient(bottom, #6BBEC7, #1a82f7);
}

私が求めている効果は、2 つの同じサイズの小さなテキスト領域が下にある 1 つの幅の広いテキスト ボックスです。

これは機能しますが、小さいテキスト ボックスは単に結合されます。これに対抗するために、 のマージンを導入しようとしました1pxが、これにより、2 番目に小さいテキスト ボックスが次の行に押し出されてしまいました。

また、ボックスに境界線を追加しようとしましたが、役に立ちませんでした。

ページの全体的なレイアウトを変更せずに、ギャップまたはデリニエーターの効果を得るにはどうすればよいですか?

4

3 に答える 3

1

textarea2番目の行を別divの行にラップするだけ50%でpadding-right、テキストエリア間のギャップをエミュレートできます。

/* textareas are inside this .wrap and have 100% */
.wrap {
    width: 50%;
    box-sizing: border-box;
    float: left;
}
.wrap-first {
    padding-right: 1px;
}

http://jsfiddle.net/dfsq/RHYSL/

于 2013-02-19T09:03:37.500 に答える
0

悲しいことに、幅 % は期待どおりに機能しません。親の幅の % として計算され、マージンとパディングは考慮されません。親が幅 100px の場合、幅を 50% に設定すると、幅 50px を設定したのと同じになります。これに 5px のパディングを追加すると、合計 55px の幅になり、ボックスの 1 つが押し下げられます。私の知る限りでは、幅 % とマージン/パディングを組み合わせて、javascript を使用せずにピクセルを完璧にスケーリングすることは不可能です。私が考えることができる最善の方法は、幅をわずかに小さく設定し、50% ではなく 49.5% に設定し、対称性を維持するためにテキストボックスを左右にフロートさせることです。

テキストボックスは親のサイズに合わせてスケーリングされますが、2 つのボックス間の距離もスケーリングされます。これは、親が大きい場合は 0.5% も大きくなるためです。

<div>
     <textarea id="wideBox" class="wideBox"></textarea>       
     <textarea id="small1" class="narrowInput left"></textarea>
     <textarea id="small2" readonly="readonly" class="narrowInput right"></textarea>
     <div class="clear"></div>
</div>

.wideBox {
width: 100%;    
box-sizing: border-box;
opacity: 80;    
height: 200px;  
background: -ms-linear-gradient(top, #213A4F, #1a82f7);
}

.narrowInput {
width: 49.5%; /* Note lower width */
box-sizing: border-box;    
height: 200px;  
padding: 5px;
background: -ms-radial-gradient(bottom, #6BBEC7, #1a82f7);      
 }

/* Float to keep symmetric layout */
.left {
    float: left;
}

.right {
    float: right;
}

/* clear after float */
.clear {
clear: both;
}
于 2013-02-19T08:52:16.667 に答える
0

あなたの質問が正しいかどうかわかりません。

ところで、CSS3 Calc は使えますか？

デモ: http://jsfiddle.net/4uc3N/

HTML

<div>
     <textarea id="wideBox" class="wideInput"></textarea>       
     <textarea id="small1" class="narrowInput"></textarea>
     <textarea id="small2" class="narrowInput"></textarea>
</div>

CSS

#wideBox {
    width: calc(100% - 4px);    /* A Trick */
    box-sizing: border-box;
    opacity: 80;    
    height: 200px;  
    background: -ms-linear-gradient(top, #213A4F, #1a82f7);
}

.narrowInput {
    width: calc(50% - 14px); /* Another Trick */
    box-sizing: border-box;    
    height: 200px;  
    float: left;
    padding: 5px;
    background: -ms-radial-gradient(bottom, #6BBEC7, #1a82f7);      
}
于 2013-02-19T10:42:11.183 に答える