我想将父div中的所有div（1..7）放在彼此旁边，并且当屏幕大小发生变化（纵向，横向，缩放）时，div1..7的组织是自动完成，以便它们始终包含在父div中。
到目前为止，我成功了：
我想念的是：
html {background: #eee;}
* {padding: 0; margin: 0;}
html, body {height: 100%;text-align: center;}
.container{display: inline-block; vertical-align: middle; margin-top: 10vh; background: rgba(200,200,200,0.5);}
@media screen and (orientation:landscape) {.container {width: 60vw; height: 80vh;}}
@media screen and (orientation:portrait) {.container {width: 80vw; height: 80vh;}}
.div1 {display: block; background: rgba(80,0,0,0.5); width:100px; height:100px;float:left;}
.div2 {display: block; background: rgba(0,80,0,0.5); width:200px; height:100px;float:left;}
.div3 {display: block; background: rgba(0,0,80,0.5); width:100px; height:200px;float:left;}
.div4 {display: block; background: rgba(80,0,0,0.5); width:100px; height:100px;float:left;}
.div5 {display: block; background: rgba(0,80,0,0.5); width:200px; height:100px;float:left;}
.div6 {display: block; background: rgba(0,0,80,0.5); width:100px; height:200px;float:left;}
.div7 {display: block; background: rgba(80,0,0,0.5); width:100px; height:100px;float:left;}<div class="container">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
<div class="div5"></div>
<div class="div6"></div>
<div class="div7"></div>
</div>
答案 0 :(得分：0)
缺少div close标签......
你可以使用flexbox将你的divb放在一起
<div class="container">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
<div class="div5"></div>
<div class="div6"></div>
<div class="div7"></div>
</div> ID | timestamp | ID | timestamp |
-------------------------------- --------------------------------
1 | 2017-01-01 00:00:00 | 1 | 2017-01-01 00:00:00 |
2 | 2017-01-04 00:00:00 | 8 | 2017-01-04 00:00:00 |
3 | 2017-01-11 00:00:00 | 9 | 2017-01-11 00:00:00 |
4 | 2017-01-14 00:00:00 | 4 | 2017-01-14 00:00:00 |
5 | 2017-01-07 00:00:00 | 5 | 2017-01-07 00:00:00 |
答案 1 :(得分：0)
不太确定你最终的期望。
使用窗口大小固定的宽度和高度可能会在某一点上变得太小。
不同高度和宽度的盒子可以包裹在几条线上但不会被覆盖
要使x，y容器居中，您可以使用display table或flex属性。并避免边距。如果窗口太小，它也会允许滚动。
这里有一个例子，请不要犹豫澄清:)
表格显示
.div6,
.div3 {
background: rgba(0, 0, 80, 0.5);
width: 100px;
height: 200px;
}
.div2,
.div5 {
background: rgba(0, 80, 0, 0.5);
width: 200px;
height: 100px;
}
.div7,
.div1,
.div4 {
background: rgba(80, 0, 0, 0.5);
width: 100px;
height: 100px;
}
.container>div {
float: left;
/*see me */
box-shadow: 0 0 0 2px;
}
html {
height: 100%;
width: 100%;
display: table;
text-align: center;
background: #eee;
}
body {
display: table-cell;
vertical-align: middle;
}
.container {
display:inline-block;
background: rgba(200, 200, 200, 0.5);
}
@media screen and (orientation:landscape) {
.container {
max-width: 60vw;
}
}
@media screen and (orientation:portrait) {
.container {
max-width: 80vw;
}
}<div class="container">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
<div class="div5"></div>
<div class="div6"></div>
<div class="div7"></div>
</div>
flex display
.div6,
.div3 {
background: rgba(0, 0, 80, 0.5);
width: 100px;
height: 200px;
}
.div2,
.div5 {
background: rgba(0, 80, 0, 0.5);
width: 200px;
height: 100px;
}
.div7,
.div1,
.div4 {
background: rgba(80, 0, 0, 0.5);
width: 100px;
height: 100px;
}
.container>div {
float: left;
}
html {
height: 100%;
display: flex;
background: #eee;
}
body {
margin:auto;
display:flex;/* .container will wrap float elements and will show bg */
}
.container {
background: rgba(200, 200, 200, 0.5);
}
@media screen and (orientation:landscape) {
.container {
max-width: 60vw;
}
}
@media screen and (orientation:portrait) {
.container {
max-width: 80vw;
}
}<div class="container">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
<div class="div5"></div>
<div class="div6"></div>
<div class="div7"></div>
</div>
display:grid将使div通过列或行覆盖/跨越。
它也很容易将x，y单个元素集中在：
静态大小的示例：
.div6,
.div3 {
background: rgba(0, 0, 80, 0.5);
width: 100px;
height: 200px;
grid-row: span 2;
}
.div2,
.div5 {
background: rgba(0, 80, 0, 0.5);
width: 200px;
height: 100px;
grid-column: span 2;
}
.div7,
.div1,
.div4 {
background: rgba(80, 0, 0, 0.5);
width: 100px;
height: 100px;
}
.container>div {
margin: auto;
}
html {
height: 100%;
display: grid;
background: #eee;
}
body {
margin: auto;
/* to center x,y */
}
.container {
display: grid;
grid-template-columns: repeat(auto-fill,100px);
grid-gap: 1vh;
background: rgba(200, 200, 200, 0.5);
}
@media screen and (orientation:landscape) {
.container {
width: 60vw;
height: 80vh;
}
}
@media screen and (orientation:portrait) {
.container {
width: 80vw;
height: 80vh;
}
}<div class="container">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
<div class="div5"></div>
<div class="div6"></div>
<div class="div7"></div>
</div>
不吉利的示例调整大小
.div6,
.div3 {
background: rgba(0, 0, 80, 0.5);
width: 100px;
height: 200px;
max-height:36vh;
max-width:18vh;
grid-row: span 2;
}
.div2,
.div5 {
background: rgba(0, 80, 0, 0.5);
width: 200px;
height: 100px;
max-height:18vh;
max-width:36vh;
grid-column: span 2;
}
.div7,
.div1,
.div4 {
background: rgba(80, 0, 0, 0.5);
width: 100px;
height: 100px;
max-height:18vh;
max-width:18vh;
}
.container>div {
margin: auto;
}
html {
height: 100%;
display: grid;
background: #eee;
}
body {
margin: auto;
/* to center x,y */
}
.container {
display: grid;
grid-template-columns: repeat(auto-fill,minmax(10vh, 20vh));
grid-gap: 1vh;
background: rgba(200, 200, 200, 0.5);
}
@media screen and (orientation:landscape) {
.container {
width: 60vw;
height: 80vh;
}
}
@media screen and (orientation:portrait) {
.container {
width: 80vw;
height: 80vh;
}
}<div class="container">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
<div class="div5"></div>
<div class="div6"></div>
<div class="div7"></div>
</div>