0

コンテナ div に 2 つの div が残っています。2 番目の div にはwidth: 20px. 利用可能なすべてのスペースを埋めるために最初の div が必要で、インラインのままです。最初の div 幅を 100% に設定しても、固定幅の 2 番目の div が下がるため機能しません。どのようにできるのか？

コードはここで説明されています: http://jsfiddle.net/7EW5h/4/

ありがとう

4

4 に答える 4

2

calcCSS3 関数を使用し#inner1て、次のように動的な幅を divに設定できます。

width: calc(100% - 20px);

Firefox 16 (またはそれ以降) および Internet Explorer 9 (またはそれ以降) と互換性があります。

次のようにベンダー プレフィックスを追加できます。

width: -moz-calc(100% - 20px);
width: -webkit-calc(100% - 20px);
width: calc(100% - 20px);

Chrome 19 (またはそれ以降)、Firefox 4 (またはそれ以降)、Internet Explorer 9 (またはそれ以降)、および Safari 6 (またはそれ以降) と互換性を持たせるため。

ここで互換性のあるテーブルを確認できます: http://caniuse.com/#search=calc

あなたの例に関しては、 divに設定border: 0する必要がありました。#inner1#inner2

于 2012-12-07T12:44:21.720 に答える
1

Chrome、IE9、Firefox、Operaでソリューションをテストして解決しました。

  1. 2つの入力要素にコンテナを使用します。
  2. 正しい要素が最初になるように要素の順序を変更します。
  3. 残りのスペースを埋めるはずの要素をフロートさせないでください。に設定するだけdisplayですblock（これは要素のデフォルトですdiv）。
  4. margin-right大きい方のコンテナのを右側の要素の全幅に設定します。ここでは、両方の要素の境界線、マージン、パディングなども考慮する必要があります。

HTML：

<div id="container">
    <div id="inner2">
        <input />
    </div>
    <div id="inner1">
        <input />
    </div>
</div>​

CSS：

#inner2 {
    float: right;
}
#inner2 input {
    height: 20px;
    width: 20px;
    border: 1px solid #000;
}
#inner1 {
    margin-right: 24px;
}
#inner1 input {
    width: 100%;
    height: 20px;
    border: 1px solid #000;
}

実例： http： //jsfiddle.net/7EW5h/22/。inputまた、2つの要素に明示的に境界線を設定していることにも注意してください。

絶対位置を使用せずにHTMLまたは2つの要素の順序を変更せずに、それを機能させることはできません。

于 2012-12-07T12:51:03.400 に答える
0

必要に応じて要素を配置するためにを使用position:absolute;してみましたか？

フィドルを参照-JSFiddleの例

于 2012-12-07T12:29:32.153 に答える
0

複雑にすることなく、次のことができると思います。

  1. 2 つの入力からフロートを削除します。
  2. 以下に示すように、2 番目の入力を絶対に配置します。

  3. コンテンツの重複を避けるために、最初の入力に padding-right を追加します。また、以下のコードに表示されていなくても、デフォルトのボーダー、マージン、およびパディングの存在を忘れないでください。 </p> 

           #container {
           overflow: hidden;
           background-color: red;
        }

               #inner1 {
                  width: 100%;
                   background-color: blue;
                   padding-right:45px;

                 }

             #inner2 {
                height: 20px;
                width: 20px;
                 background-color: green;
                 position:absolute;
                 right:0;
                 top:0;
                 }

    </p>

于 2012-12-07T13:29:45.760 に答える