在类似 table 的响应式布局中将元素对齐到行的底部
Align elements to the bottom of the row in responsive table-like layout
我有以下组组件,根据视口大小,它会显示 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+ 的情况下解决问题。
您可以通过两种方式完成:
弹性盒子:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
或者如果您尝试使用更丰富的 html 结构,您可以通过 vertical-align 来实现它:
http://www.w3schools.com/cssref/pr_pos_vertical-align.asp
如果我弄错了你的问题,请评论我的post。
对于 js 示例...
document.getElementById("something").style.verticalalign = "top"
您可以使用内联块,而不是浮动块。
.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>
display:inline-block 而不是 float 将允许使用 vertical-align.
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;
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;
}
<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 列:
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+ 的情况下解决问题。
您可以通过两种方式完成:
弹性盒子: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
或者如果您尝试使用更丰富的 html 结构,您可以通过 vertical-align 来实现它: http://www.w3schools.com/cssref/pr_pos_vertical-align.asp
如果我弄错了你的问题,请评论我的post。
对于 js 示例...
document.getElementById("something").style.verticalalign = "top"
您可以使用内联块,而不是浮动块。
.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>
display:inline-block 而不是 float 将允许使用 vertical-align.
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;
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;
}
<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>