将可展开的div对齐

Question

我正在尝试对齐这些块，以便它们可扩展，但也可以内联。但我似乎无法让他们正确地维护自己的空间。我想要的布局如下

在第2栏和第3栏自动展开以填充所查看的任何分辨率的空间。

JSFiddle 和 JSFiddle 2

CSS / HTML：

＆＃13;

＆＃13;

.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);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

以下是三种技巧

＆＃34;显示代码段＆＃34;然后跑去查看完整的例子。

＃1 - display: inline-block和calc

兼容性：IE 9 + and all modern browsers。如果需要，有一些解决方法可以使用IE8 +。

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

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

• div为min-height: 100%，并会根据内容重新调整大小。这是可能的，谢谢 html,body { height: 100%; }

• 通过将结束div标记放在下一个开始标记旁边来删除内联间隙。 More info here.

实施例

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

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

＃2 - display: table / display: table-cell

兼容性：IE 8 + and all modern browsers

• 前三个div用display: table

包裹在一个div中

• 前三个div分配给display: table-cell

• 固定的左侧div具有固定宽度

• 允许＆＃34;细胞＆＃34;为了均匀地展开可用宽度，包装器被赋予table-layout: fixed

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

，这计算为百分比计算

• 底部div位于包装器之外，并被赋予display: block。它有一个顶部边框来创造人造边缘

实施例

＆＃13;

＆＃13;

* {
  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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

＃3 - 未来！ display: 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.

实施例

＆＃13;

＆＃13;

* {
  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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

它不完美，但似乎用css表做你想做的事。

<div class="table">

  <div class="trow">
    <div class="tcell">box1</div>
    <div class="tcell">box2</div>
    <div class="tcell">box3</div>
  </div>

</div>   

<div class="table">
    <div class="tcell last">box4</div>
</div> 

.table{display:table; width:100%; text-align:center;}
.tcell{display:table-cell; background:#000; color:#fff; min-height:100px; padding:20px; border:1px solid #fff; }
.trow{display:table-row;  }
.last{ background:red; }
.trow .tcell:first-child{ width:300px; }

http://jsfiddle.net/fjsvnrLp/5/

你实际上并不需要行