在响应式表格式布局中将元素对齐到行的底部

Question

我有以下Group组件，根据视口大小，它将显示2或3列：

var toggleBtn = document.getElementById('toggle');
var group = document.getElementById('group');

toggleBtn.onclick = function(e) {
	if (toggleBtn.innerText === 'FAKE BIG VIEWPORT') {
  	toggleBtn.innerText = 'FAKE SMALL VIEWPORT';
  	group.className = 'group big';
  }
  else {
  	toggleBtn.innerText = 'FAKE BIG VIEWPORT';
  	group.className = 'group small';
  }
}

* {
  box-sizing: border-box;
}

body {
  padding: 0;
  margin: 0;
  font-family: monospace, sans-serif;
}

.group {
  position: relative;
  border: 2px solid #000;
  margin: 10px;
  padding: 0 10px 10px;
}

.group::after {
  content: "";
  display: table;
  clear: both;
}

.item {
  position: relative;
  float: left;
  padding: 0 5px;
  margin: 10px 0 0;
}

.group.small .item {
  width: 50%;
}

.group.big .item {
  width: 33.3333%;
}

.group.small .item:nth-child(2n+1),
.group.big .item:nth-child(3n+1) {
  padding: 0 5px 0 0;
  clear: both;
}

.group.small .item:nth-child(2n),
.group.big .item:nth-child(3n) {
  padding: 0 0 0 5px;
}

.cell {
  position: relative;
  background: red;
}

.group.small .item:nth-child(2n+1) .cell,
.group.big .item:nth-child(3n+1) .cell {
  background: yellow;
}

.group.small .item:nth-child(2n) .cell,
.group.big .item:nth-child(3n) .cell {
  background: cyan;
}

label {
  font-size: .75rem;
}

input {
  position: relative;
  width: 100%;
  border: none;
  border-bottom: 2px solid #000;
  background: transparent;
  outline: none;
  font-family: monospace, sans-serif;
}

#toggle {
  position: relative;
  border: none;
  background: #000;
  outline: none;
  color: #FFF;
  font-family: monospace, sans-serif;
  padding: 10px;
  margin: 0 10px;
}

<div id="group" class="group big">

  <div class="item">
    <div class="cell">
      <label for="input1">Input 1 bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</label>
      <input type="text" name="input1" id="input1" />
    </div>
  </div>

  <div class="item">
    <div class="cell">
      <label for="input2">Input 2 bla bla bla bla bla bla</label>
      <input type="text" name="input2" id="input2" />
    </div>
  </div>

  <div class="item">
    <div class="cell">
      <label for="input3">Input 3 bla bla bla bla bla bla</label>
      <input type="text" name="input3" id="input3" />
    </div>
  </div>

  <div class="item">
    <div class="cell">
      <label for="input4">Input 4 bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</label>
      <input type="text" name="input4" id="input4" />
    </div>
  </div>

  <div class="item">
    <div class="cell">
      <label for="input5">Input 5 bla bla bla bla bla bla</label>
      <input type="text" name="input5" id="input5" />
    </div>
  </div>

  <div class="item">
    <div class="cell">
      <label for="input6">Input 6 bla bla bla bla bla bla</label>
      <input type="text" name="input6" id="input6" />
    </div>
  </div>

  <div class="item">
    <div class="cell">
      <label for="input7">Input 6 bla bla bla bla bla bla</label>
      <input type="text" name="input7" id="input7" />
    </div>
  </div>

</div>

<button id="toggle">FAKE SMALL VIEWPORT</button>

您可以单击按钮将2列更改为3列版本。

问题是同一行上的元素应该与它的底部对齐，而不是与顶部对齐，这样无论标签的大小如何，所有输入都与底部对齐。

我知道可以使用JS来完成，但我想知道是否有任何解决问题的解决方案，如果没有它可以在IE10 +中运行。

Answer 1

您可以通过两种方式实现：

Flexbox的： https://css-tricks.com/snippets/css/a-guide-to-flexbox/

或者如果你尝试更丰富的html结构，你可以通过vertical-align来实现它： http://www.w3schools.com/cssref/pr_pos_vertical-align.asp

如果我弄错了您的问题，请评论我的帖子。

对于js例子......

document.getElementById("something").style.verticalalign = "top"

Answer 2

您可以使用内联块，而不是浮动。

.item {
  display: inline-block;
  vertical-align: bottom;
}

var toggleBtn = document.getElementById('toggle');
var group = document.getElementById('group');

toggleBtn.onclick = function(e) {
	if (toggleBtn.innerText === 'FAKE BIG VIEWPORT') {
  	toggleBtn.innerText = 'FAKE SMALL VIEWPORT';
  	group.className = 'group big';
  }
  else {
  	toggleBtn.innerText = 'FAKE BIG VIEWPORT';
  	group.className = 'group small';
  }
}

* {
  box-sizing: border-box;
}

body {
  padding: 0;
  margin: 0;
  font-family: monospace, sans-serif;
}

.group {
  position: relative;
  border: 2px solid #000;
  margin: 10px;
  padding: 0 10px 10px;
  font-size: 0; /*remove whitespace*/
}

.group::after {
  content: "";
  display: table;
  clear: both;
}

.item {
  position: relative;
  /*float: left;*/
  padding: 0 5px;
  margin: 10px 0 0;
  display: inline-block; /*added*/
  vertical-align: bottom;  /*added*/
  font-size: 16px; /*reset font size*/
}

.group.small .item {
  width: 50%;
}

.group.big .item {
  width: 33.3333%;
}

.group.small .item:nth-child(2n+1),
.group.big .item:nth-child(3n+1) {
  padding: 0 5px 0 0;
  clear: both;
}

.group.small .item:nth-child(2n),
.group.big .item:nth-child(3n) {
  padding: 0 0 0 5px;
}

.cell {
  position: relative;
  background: red;
}

.group.small .item:nth-child(2n+1) .cell,
.group.big .item:nth-child(3n+1) .cell {
  background: yellow;
}

.group.small .item:nth-child(2n) .cell,
.group.big .item:nth-child(3n) .cell {
  background: cyan;
}

label {
  font-size: .75rem;
}

input {
  position: relative;
  width: 100%;
  border: none;
  border-bottom: 2px solid #000;
  background: transparent;
  outline: none;
  font-family: monospace, sans-serif;
}

#toggle {
  position: relative;
  border: none;
  background: #000;
  outline: none;
  color: #FFF;
  font-family: monospace, sans-serif;
  padding: 10px;
  margin: 0 10px;
}

<div id="group" class="group big">

  <div class="item">
    <div class="cell">
      <label for="input1">Input 1 bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</label>
      <input type="text" name="input1" id="input1" />
    </div>
  </div>

  <div class="item">
    <div class="cell">
      <label for="input2">Input 2 bla bla bla bla bla bla</label>
      <input type="text" name="input2" id="input2" />
    </div>
  </div>

  <div class="item">
    <div class="cell">
      <label for="input3">Input 3 bla bla bla bla bla bla</label>
      <input type="text" name="input3" id="input3" />
    </div>
  </div>

  <div class="item">
    <div class="cell">
      <label for="input4">Input 4 bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</label>
      <input type="text" name="input4" id="input4" />
    </div>
  </div>

  <div class="item">
    <div class="cell">
      <label for="input5">Input 5 bla bla bla bla bla bla</label>
      <input type="text" name="input5" id="input5" />
    </div>
  </div>

  <div class="item">
    <div class="cell">
      <label for="input6">Input 6 bla bla bla bla bla bla</label>
      <input type="text" name="input6" id="input6" />
    </div>
  </div>

  <div class="item">
    <div class="cell">
      <label for="input7">Input 6 bla bla bla bla bla bla</label>
      <input type="text" name="input7" id="input7" />
    </div>
  </div>

</div>

<button id="toggle">FAKE SMALL VIEWPORT</button>

或使用CSS3 flexbox。

.group {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
}

var toggleBtn = document.getElementById('toggle');
var group = document.getElementById('group');

toggleBtn.onclick = function(e) {
	if (toggleBtn.innerText === 'FAKE BIG VIEWPORT') {
  	toggleBtn.innerText = 'FAKE SMALL VIEWPORT';
  	group.className = 'group big';
  }
  else {
  	toggleBtn.innerText = 'FAKE BIG VIEWPORT';
  	group.className = 'group small';
  }
}

* {
  box-sizing: border-box;
}

body {
  padding: 0;
  margin: 0;
  font-family: monospace, sans-serif;
}

.group {
  position: relative;
  border: 2px solid #000;
  margin: 10px;
  padding: 0 10px 10px;
  display: flex; /*added*/
  flex-wrap: wrap; /*added*/
  align-items: flex-end; /*added*/
}

.group::after {
  content: "";
  display: table;
  clear: both;
}

.item {
  position: relative;
  /* float: left; */
  padding: 0 5px;
  margin: 10px 0 0;
}

.group.small .item {
  width: 50%;
}

.group.big .item {
  width: 33.3333%;
}

.group.small .item:nth-child(2n+1),
.group.big .item:nth-child(3n+1) {
  padding: 0 5px 0 0;
  clear: both;
}

.group.small .item:nth-child(2n),
.group.big .item:nth-child(3n) {
  padding: 0 0 0 5px;
}

.cell {
  position: relative;
  background: red;
}

.group.small .item:nth-child(2n+1) .cell,
.group.big .item:nth-child(3n+1) .cell {
  background: yellow;
}

.group.small .item:nth-child(2n) .cell,
.group.big .item:nth-child(3n) .cell {
  background: cyan;
}

label {
  font-size: .75rem;
}

input {
  position: relative;
  width: 100%;
  border: none;
  border-bottom: 2px solid #000;
  background: transparent;
  outline: none;
  font-family: monospace, sans-serif;
}

#toggle {
  position: relative;
  border: none;
  background: #000;
  outline: none;
  color: #FFF;
  font-family: monospace, sans-serif;
  padding: 10px;
  margin: 0 10px;
}

<div id="group" class="group big">

  <div class="item">
    <div class="cell">
      <label for="input1">Input 1 bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</label>
      <input type="text" name="input1" id="input1" />
    </div>
  </div>

  <div class="item">
    <div class="cell">
      <label for="input2">Input 2 bla bla bla bla bla bla</label>
      <input type="text" name="input2" id="input2" />
    </div>
  </div>

  <div class="item">
    <div class="cell">
      <label for="input3">Input 3 bla bla bla bla bla bla</label>
      <input type="text" name="input3" id="input3" />
    </div>
  </div>

  <div class="item">
    <div class="cell">
      <label for="input4">Input 4 bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</label>
      <input type="text" name="input4" id="input4" />
    </div>
  </div>

  <div class="item">
    <div class="cell">
      <label for="input5">Input 5 bla bla bla bla bla bla</label>
      <input type="text" name="input5" id="input5" />
    </div>
  </div>

  <div class="item">
    <div class="cell">
      <label for="input6">Input 6 bla bla bla bla bla bla</label>
      <input type="text" name="input6" id="input6" />
    </div>
  </div>

  <div class="item">
    <div class="cell">
      <label for="input7">Input 6 bla bla bla bla bla bla</label>
      <input type="text" name="input7" id="input7" />
    </div>
  </div>

</div>

<button id="toggle">FAKE SMALL VIEWPORT</button>

Answer 3

display：inline-block而不是float允许使用vertical-align。

＆＃13;

＆＃13;

var toggleBtn = document.getElementById('toggle');
var group = document.getElementById('group');

toggleBtn.onclick = function(e) {
	if (toggleBtn.innerText === 'FAKE BIG VIEWPORT') {
  	toggleBtn.innerText = 'FAKE SMALL VIEWPORT';
  	group.className = 'group big';
  }
  else {
  	toggleBtn.innerText = 'FAKE BIG VIEWPORT';
  	group.className = 'group small';
  }
}

＆＃13;

* {
  box-sizing: border-box;
}

body {
  padding: 0;
  margin: 0;
  font-family: monospace, sans-serif;
}

.group {
  position: relative;
  border: 2px solid #000;
  margin: 10px;
  padding: 0 10px 10px;
}

.group::after {
  content: "";
  display: table;
  clear: both;
}

.item {
  position: relative;
  display:inline-block;
  vertical-align:bottom;
  padding: 0 5px;
  margin: 10px 0 0;
}

.group.small .item {
  width: 50%;
}

.group.big .item {
  width: 31%;
}

.group.small .item:nth-child(2n+1),
.group.big .item:nth-child(3n+1) {
  padding: 0 5px 0 0;
  clear: both;
}

.group.small .item:nth-child(2n),
.group.big .item:nth-child(3n) {
  padding: 0 0 0 5px;
}

.cell {
  position: relative;
  background: red;
}

.group.small .item:nth-child(2n+1) .cell,
.group.big .item:nth-child(3n+1) .cell {
  background: yellow;
}

.group.small .item:nth-child(2n) .cell,
.group.big .item:nth-child(3n) .cell {
  background: cyan;
}

label {
  font-size: .75rem;
}

input {
  position: relative;
  width: 100%;
  border: none;
  border-bottom: 2px solid #000;
  background: transparent;
  outline: none;
  font-family: monospace, sans-serif;
}

#toggle {
  position: relative;
  border: none;
  background: #000;
  outline: none;
  color: #FFF;
  font-family: monospace, sans-serif;
  padding: 10px;
  margin: 0 10px;
}

＆＃13;

<div id="group" class="group big">

  <div class="item">
    <div class="cell">
      <label for="input1">Input 1 bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</label>
      <input type="text" name="input1" id="input1" />
    </div>
  </div>

  <div class="item">
    <div class="cell">
      <label for="input2">Input 2 bla bla bla bla bla bla</label>
      <input type="text" name="input2" id="input2" />
    </div>
  </div>

  <div class="item">
    <div class="cell">
      <label for="input3">Input 3 bla bla bla bla bla bla</label>
      <input type="text" name="input3" id="input3" />
    </div>
  </div>

  <div class="item">
    <div class="cell">
      <label for="input4">Input 4 bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</label>
      <input type="text" name="input4" id="input4" />
    </div>
  </div>

  <div class="item">
    <div class="cell">
      <label for="input5">Input 5 bla bla bla bla bla bla</label>
      <input type="text" name="input5" id="input5" />
    </div>
  </div>

  <div class="item">
    <div class="cell">
      <label for="input6">Input 6 bla bla bla bla bla bla</label>
      <input type="text" name="input6" id="input6" />
    </div>
  </div>

  <div class="item">
    <div class="cell">
      <label for="input7">Input 6 bla bla bla bla bla bla</label>
      <input type="text" name="input7" id="input7" />
    </div>
  </div>

</div>

<button id="toggle">FAKE SMALL VIEWPORT</button>

＆＃13;

＆＃13;

＆＃13;