4

我有这个问题，我找不到解决方案：

我有 3 个div，其中两个位于第三个内部。

其中div包含其他的有一个百分比宽度。

第二个在第一个内部，没有特定的宽度并且浮动到左侧。

第三个也在第一个内部，具有特定的宽度并向右浮动。

问题是我如何让第二个div尽可能宽？

因为它默认适合内容。

<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

浮动不是布局目的的好选择，因为这并不是它的真正设计目的。如果您要寻找的只是并排放置 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 一个百分比值而不是像素，或者找出总宽度并将其设置为负 50 像素。

你也试过了width:100%吗？

于 2013-06-12T11:57:19.250 回答
-1

width: 100% for B 是他容器的宽度，希望这说明：

<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 回答