3

2 つの divdivaとdivb. 高さは固定です30px。それらを1行に1つずつ表示したい。10%これは、 および の幅を90%それぞれ およびで与えることによって行うことができますfloat: left。これはうまくいきます。しかし、私はそれらに の境界線を与えました1 px。これは計算を妨げます。2 番目の div の幅を指定88%し、機能しています。しかし、その div の後に空白があります。

両方の div を 1 行に表示したい。ページのサイズが変更され、div がスペースを埋めるようになり、固定幅を指定できなくなります。最初の div は、幅を広くしたいだけなので、固定幅にすることができます150 px。ただし、2 番目の div はスペースを埋めるために広くする必要があります。

私が得ているのはこれです。

現在のレイアウト

そして私はこれが欲しい：

予想されるレイアウト

これがフィドルです。

4

6 に答える 6

11

width: 100%bodyに a を追加しfloat: left;て div1 を指定しfloat: left;、div2 を削除します。

子要素で幅または高さのパーセンテージを使用している場合は、親またはコンテナー要素でも幅または高さのパーセンテージを指定する必要があります。

それはそれを修正する必要があります！:)

ここでこのフィドルを参照してください

幸運を！

于 2012-04-17T12:27:12.467 に答える
4

これを試して

 body{
     margin: 0;
 }
 #div1{
     height: 30px;
     width: 10%;
     outline: solid 1px #000000;
     background-color: #0066CC;
     float: left;
 }
 #div2{
     height: 30px;
     width: 90%;
     outline: solid 1px #000000;
     background-color: #66CC00;
     float: left;
 }​

IEにはあまり適していませんが

于 2012-04-17T12:28:56.663 に答える
3

http://jsfiddle.net/J7mJX/1/

追加するだけ

#div1, #div2 {
    -webkit-box-sizing: border-box;  
    -moz-box-sizing: border-box;  
    box-sizing: border-box;   
}

したがって、境界線は幅の計算に含まれます。

于 2012-04-17T12:37:06.677 に答える
2

box-sizing：border-box;を設定します。％幅のフロートdivで。

https://developer.mozilla.org/En/CSS/Box-sizing

于 2012-04-17T12:29:27.227 に答える
0

または、境界線を追加して親 div の幅に影響を与えない余分な div を追加することもできます

http://jsfiddle.net/ollie/76Raj/9/

于 2012-04-17T12:37:06.317 に答える