Question

我正在尝试编写两个内联Div，其中一个已在px值中定义宽度，而另一个则获取容器的剩余宽度

<div class="wrapper">
    <div class="main">main</div>
    <div class="sidebar">sidebar (300px)</div>
</div>

Answer 1

使用CSS table layout非常容易实现，并且really good support。它还具有平衡色谱柱高度的额外好处 - 从而使圆柱形布局变得轻而易举。

html, body {min-height:100%; height:100%; margin:0;}
.wrapper {display:table; width:100%; height:100%; min-height;100%;}
.wrapper .main {display:table-cell; background:#eee;}
.wrapper .sidebar {display:table-cell; background:#666; width:300px;}

<div class="wrapper">
    <div class="main">main</div>
    <div class="sidebar">sidebar (300px)</div>
</div>

Answer 2

我们还没有给我们太多的帮助，但我建议您使用display:table-cell;代替inline-block。

＆＃13;

.wrapper {
  display:table;
  width:100%;
}

.main, .sidebar {
  display:table-cell;
  border:1px solid black;
}

.sidebar {
  width:300px;
}

＆＃13;

<div class="wrapper">
    <div class="main">main</div>
    <div class="sidebar">sidebar (300px)</div>
</div>

＆＃13;

Answer 3

使用没有浮点数的calc：

＆＃13;

body,
div {
  padding: 0;
  border: 0;
  font-size: 0
}

.wrapper {
  width: 100%;
}

.main {
  display: inline-block;
  width: calc( 100% - 300px);
  background: blue;
  height: 50px;
}

.sidebar {
  display: inline-block;
  width: 300px;
  background: red;
  height: 50px;
}

＆＃13;

<div class="wrapper">
  <div class="main">main</div>
  <div class="sidebar">sidebar (300px)</div>
</div>

＆＃13;

这有点脆弱，表或flexbox更好_

flexbox示例：

＆＃13;

.wrapper {
  width: 100%;
  display:flex;
}

.main {
  flex-basis:300px;
  background: blue;
  height: 50px;
}

.sidebar {
  flex:1;
  background: red;
  height: 50px;
}

＆＃13;

<div class="wrapper">
  <div class="main">main</div>
  <div class="sidebar">sidebar (300px)</div>
</div>

＆＃13;

内联div，其中一个具有自定义宽度

3 个答案: