html - 在行中对齐可扩展的 div

Question

我正在尝试对齐这些 block ，使它们既可扩展，又可内联。但我似乎无法让他们正确维护自己的空间。我要的布局如下

框 2 和 3 会自动扩展以填充正在查看的任何分辨率的空间。

JSFiddle 和 JSFiddle 2

CSS/HTML:

.container {
  width: 75%;
  min-width: 1005px;
  max-width: 1428px;
  height: 330px;
  margin: 0 auto;
  background-color: gray;
}
.box1 {
  float: left;
  width: 455px;
  height: 250px;
  background-color: rgba(0, 0, 0, 0.75);
  margin-right: 5px;
  margin-bottom: 5px;
}
.box2 {
  float: left;
  width: 75%;
  min-width: 340px;
  height: 250px;
  background-color: rgba(100, 50, 50, 0.75);
  margin-right: 5px;
  margin-bottom: 5px;
}
.box3 {
  float: left;
  width: 25%;
  min-width: 190px;
  height: 250px;
  background-color: rgba(50, 50, 100, 0.75);
  margin-right: 5px;
  margin-bottom: 5px;
}
.box4 {
  display: block;
  width: 100%;
  height: 60px;
  background-color: rgba(50, 100, 50, 0.75);
}

<div class="container">
  <div class="box1">Test</div>
  <div class="box2">Test</div>
  <div class="box3">Test</div>
  <div class="box4">Test</div>
</div>

Answer 1

这里有三种技巧

“显示代码片段”并运行以查看完整示例。

#1 - 显示:内联 block 和计算

兼容性:IE 9 + and all modern browsers .如果需要，有一些变通方法可以使它与 IE8+ 一起使用。

• 使用 width: calc(50% - 60px)

从百分比计算中移除边距和固定列

• div 被赋予 min-height: 100% 并将根据内容调整大小。这是可能的，因为html,body { 高度: 100%; }

• 通过将关闭的 div 标签紧挨着下一个开始标签放置来消除行内间隙。 More info here.

例子

注意:如果需要，子选择器可以替换为类选择器。

html,
body {
  height: 100%;
  margin: 0;
}
div {
  background: #f50057;
  min-height: calc(50% - 5px);
  width: calc(50% - 60px);
  display: inline-block;
  vertical-align: top;
  margin-right: 10px;
}
/*Fix first div*/

div:first-child {
  width: 100px;
}
/*Remove third divs right margin*/

div:nth-child(3) {
  margin: 0;
}
/*Top margin for last div*/

div:last-of-type {
  width: 100%;
  display: block;
  margin: 10px 0 0;
}

<div></div><div></div><div></div><div></div>

#2 - 显示:表格/显示:表格单元格

兼容性:IE 8 + and all modern browsers

• 前三个 div 包裹在一个带有 display: table

的 div 中

• 给定前三个div display: table-cell

• 固定左边的div被赋予固定的宽度

• 为了让“单元格”均匀分布可用宽度，包装器被赋予 table-layout: fixed

• 前三个 div 之间的间距由 border 属性指定。由于 * { box-sizing: border-box }

，这被计算到百分比计算中

• 底部的 div 在包装器之外，并被赋予 display: block。它被赋予了一个顶部边框来创建人造边距

例子

* {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
  margin: 0;
  background: #000;
}
.table {
  display: table;
  height: 50%;
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}
.table > div {
  background: #f50057;
  display: table-cell;
  border-left: solid 10px #FFF;
}
.table > div:first-child {
  border-left: none;
  width: 100px;
}
.footer {
  width: 100%;
  display: block;
  background: #f50057;
  height: 50%;
  border-top: solid 10px #FFF;
}

<div class="table">
  <div></div>
  <div></div>
  <div></div>
</div>
<div class="footer"></div>

#3 - future ! 显示:flex

兼容性:IE 11, all modern browsers and Safari (with -webkit- prefix)

这是我最喜欢的!主要是因为我在大约 3 分钟内创建了它。

• 顶部的三个 div 被包裹在一个容器中，并带有 display: flex

• 第一个 div 被赋予固定的像素宽度和 flex: 0 0 auto。这告诉 div 不要增长或收缩

• 这 2 个灵活的 div 被赋予 flex: 1 并且会根据需要增长和收缩；自动忽略固定列

• 最后一个div在flex容器之外，是独立的

• 灵活的 div 的高度和宽度是用 viewport width (vw) and viewport height (vh) units. 创建的

Refer here for a fantastic flexbox guide.

例子

* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
.flex {
  display: flex;
  height: 50vh;
  width: 100vw;
}
.flex > div {
  background: #f50057;
  flex: 1;
  margin-left: 10px;
}
.flex > div:first-child {
  width: 100px;
  flex: 0 0 auto;
  margin: 0;
}
.footer {
  width: 100%;
  display: block;
  background: #f50057;
  height: calc(50vh - 10px);
  margin-top: 10px;
}

<div class="flex">
  <div></div>
  <div></div>
  <div></div>
</div>
<div class="footer"></div>