Question

说我有3个div，例如：

#wrapper {width:100%; border:1px solid #ccc}
#wrapper div {box-sizing: border-box; float:left; border:1px solid #777}
#wrapper #first {width:30%}
#wrapper #second {width:70%}
#wrapper #third {width:30px}

<div id="wrapper">
  <div id="first">A</div>
  <div id="second">B</div>
  <div id="third">C</div>
</div>

我想要什么：

这3个div都漂浮在一个柔性容器中；
第3个div的width始终是固定值，例如30px;
第一和第二个div的百分比值分别为width，以使用容器的洗手间。

例如，如果容器为100px，则第3个div为30px，第一个为(100-30)*30% = 21px，第二个为(100-30)*70% = 49px。

正确的方法是什么？

谢谢

Answer 1

您可以使用calc：

#wrapper {width:100%; border:1px solid #ccc}
#wrapper div {box-sizing: border-box; float:left; border:1px solid #777}
#wrapper #first {width:calc(30% - 30px)}
#wrapper #second {width:calc(70% - 30px)}
#wrapper #third {width:30px}

<div id="wrapper">
  <div id="first">A</div>
  <div id="second">B</div>
  <div id="third">C</div>
</div>

如果需要，可以使用css变量来不必三遍写30px。

Answer 2

您不必为此使用width计算。你可以做这样的事情。

您还可以对要动态更改大小的选择器类进行max-width，并且可以冻结最后一个块的大小，即third div。

#wrapper {width:100%; border:1px solid #ccc}

#wrapper #first{
width:30%;
display:inline-block;
border:1px solid red;
}
#wrapper #second{
width:60%;
display:inline-block;
border:1px solid teal;
}
#wrapper #third{
width:30px;
display:inline-block;
border:1px solid blue;
}

<div id="wrapper">
  <div id="first">A</div>
  <div id="second">B</div>
  <div id="third">C</div>
</div>

Answer 3

#wrapper {width:100%; border:1px solid #ccc}
#wrapper div {box-sizing: border-box; float:left; border:1px solid #777}
#wrapper #first {width:calc(30% - 15px)}
#wrapper #second {width:calc(70% - 15px)}
#wrapper #third {width:30px}

<div id="wrapper">
  <div id="first">A</div>
  <div id="second">B</div>
  <div id="third">C</div>
</div>

Answer 4

#wrapper {width:100%; border:1px solid #ccc; display: flex}
#wrapper div {box-sizing: border-box; float:left; border:1px solid #777}
#wrapper #first {flex-basis: 30%}
#wrapper #second {flex-basis: 70%}
#wrapper #third {flex-basis: 30px}

<div id="wrapper">
  <div id="first">A</div>
  <div id="second">B</div>
  <div id="third">C</div>
</div>

使用flexbox实现此目的的另一种方法。希望这会有所帮助。

如何使浮动div固定宽度，而另两个浮动div的百分比呢？

4 个答案: