1

floatを使用して、幅40% - 30% - 30%の div を持つ水平レイアウトをコンテナに整理しようとしています。

各 div 内にプレーン テキストを挿入し、その後に div の残りの水平部分を埋める入力フィールドを挿入します。

問題の単純化された再現として、これを CSS に追加してください。

.r {background-color: pink;}
.g {background-color: lightgreen;}
.b {background-color: lightblue;}
.w40 {width: 40%;}
.w30 {width: 30%;}
.w100 {width: 100%;}
.fl {float: left;}
.fr {float: right;}
.cb {clear: both;}

そしてこれはHTMLで：

<div class="r w40 fl">
    <div class="g fl">Aaaaaa:</div>
    <input class="b" value="Bbbbbb" />
</div>
<div class="r w30 fl">
    <div class="g fl">Cccccc:</div>
    <div class="b">Dddddd</div>
</div>
<div class="r w30 fl">
    <div class="g fl">Eeeeee:</div>
    <div class="b">Ffffff</div>
</div>

DdddddやFffffffのように、 bbbbbbが div の右側のすべてのスペースを占有するようにするにはどうすればよいですか?

これは私が期待しているものです： ゴール

4

3 に答える 3

1

この回答から：入力を。でスタイル設定されたdivでラップしましたoverflow: hidden。

CSS：

.r {background-color: pink;}
.g {background-color: lightgreen;}
.b {background-color: lightblue;}
.w40 {width: 40%;}
.w30 {width: 30%;}
.w100 {width: 100%;}
.fl {float: left;}
.filler {overflow: hidden; padding-right: 4px;}

HTML：

<div class="r w40 fl">
    <div class="g fl">Aaaaaa:</div>
    <div class="filler"><input class="b w100" value="Bbbbbb" /></div>
</div>
<div class="r w30 fl">
    <div class="g fl">Cccccc:</div>
    <div class="b">Dddddd</div>
</div>
<div class="r w30 fl">
    <div class="g fl">Eeeeee:</div>
    <div class="b">Ffffff</div>
</div>

これだよ。完璧な結果です！

于 2013-03-01T01:26:11.780 に答える
0

マークアップで、入力をdiv内にラップします ここに画像の説明を入力

<div class="r w40 fl">
    <div class="g fl">Aaaaaa:</div>
    <div id="inp"><input class="b" value="Bbbbbb" /></div>
</div>

このルールを使用して、ブロック表示を入力に設定します。残りの作業は 100% の幅で行います。

input {
    display:block;
    width:100%;
}

最初のピンクの div の高さ (入力によってプッシュされます) に関するいくつかの外観を確認する必要がありますここで fsFiddle を参照してください

身長差を修正

次のルールを使用して、境界線と高さのプロパティを変更します。

input {
    display:block;
    width :100%; 
    border:none;
    height:18px;

}

フィネルフィドルはこちら

于 2013-02-28T23:23:01.937 に答える
0

入力に対して size 属性が宣言されていない場合、デフォルトのサイズは 20 ですが、そのサイズでもブラウザーによって異なる方法でレンダリングされます。

1 つの解決策は、JQuery を使用して入力用に残したスペースを計算し、CSS を動的に追加して入力の幅を変更することです。

欠点は、入力が最初にデフォルトの幅でレンダリングされてからサイズ変更されるため、レイアウトが「踊る」可能性があることです。このために、display: none で入力を非表示にし、サイズ変更後にのみ表示することができます。

于 2013-02-28T22:37:54.383 に答える