4

この問題があり、解決策が見つかりません:

私には 3 つdivの s があり、そのうちの 2 つは 3 つ目の内部にあります。

divその他を含む には、パーセンテージ幅があります。

最初のものの内側にある 2 番目のものは、特定の幅を持たず、左に浮いています。

1 つ目の内側にもある 3 つ目は、特定の幅を持ち、右にフロートされます。

div問題は、2番目の幅をできるだけ広くするにはどうすればよいですか??

デフォルトで内容に合っているからです。

<div id="a">
    <div id="b">
    </div>
    <div id="c">
    </div>
</div>
<style>
#a{
    width: 80%;
}
#b{
    width: ??;
    float:left;
}
#c{
    width: 50px;
    float:right;
}
</style>
4

5 に答える 5

7

このようにdivを配置します

<div id="a">
    <div id="c">456</div>
    <div id="b">123</div>   
</div>

フロートを取り外します#b

#b{
    background-color:#06F;
}

jsFiddle ファイルを確認してください

于 2013-06-12T12:05:21.993 に答える
2

動作中のjsFiddleデモ

ここに画像の説明を入力

固定要素を他の要素の前に配置する必要があります。

<div id="a">
    <div id="c">
        FIXED ELEMENT
    </div>
    <div id="b">
        FLEXIBLE ELEMENT
    </div>
</div>

そしてCSSで：

#a {
    width: 80%;
    background: green;
    overflow: hidden;
}

#c {
    width: 50px;
    float: right;
    background: yellow;
}

#b {
    margin-right: 50px;
    background: pink;
}
于 2013-06-12T12:32:36.010 に答える
1

フロートは、実際には設計された目的ではないため、レイアウト目的には最適な選択ではありません。float の他の側面ではなく、2 つの要素を並べて配置することだけを探している場合は、代わりに table* 表示プロパティをお勧めします。

http://cssdeck.com/labs/tbarj05i

#a{
  width: 80%;
  display: table;
}
#b{
  display: table-cell;
}
#c{
  width: 50px;
  display: table-cell;
}
于 2013-06-12T12:24:43.057 に答える
0

#C にピクセルではなくパーセンテージ値を指定するか、合計幅を調べて、マイナス 50px に設定することをお勧めします。

また、試しましたwidth:100%か？

于 2013-06-12T11:57:19.250 に答える
-1

width: B の 100% はコンテナの幅です。

<html>
<head>
<style>
div{ border: solid 1px #ccc;}
#a{
width: 80%;
}
#b{
width: 100%;
float:left;
}
#c{
width: 50px;
float:right;
}
</style></head><body>
<div id="a">
<div id="b">DIV B
</div>
<div id="c">DIV C
</div>
</div>
</body>
</html>
于 2013-06-12T11:58:03.427 に答える