我遇到尝试3周的div转换从水平到垂直的大问题。下面的代码表明,超过1200像素大屏幕,一切工作正常。我要的是一个负责任的行为:通过减少浏览器的宽度,3个div的定位为一个在另一个之下。目前,该代码将调整,使2周的div是第一行中,如果有空间的。
HTML:
<div class="example">
<div class="example-item example-item-1">abcabcabcabcabcabcabcabcabcabcabcabcabc</div>
<div class="example-item example-item-2">123456789012345678901234567890123456789012345678901234567890</div>
<div class="example-item example-item-3">xyzxyzxyzxyzxyzxyzxyzxyzxyzxyzxyzxyzxyz</div>
</div>
和CSS:
.example {
background-color: black;
padding: 10px 20px;
text-align: center;
}
.example-item {
font-size: 0.7em;
display: inline-block;
padding: 10px 10px;
}
.example-item-1 {
background-color: blue;
}
.example-item-2 {
background-color: red;
}
.example-item-3 {
background-color: green;
}
你可以使用这个CSS代码,并与您自己的决定修改“max-width”属性:
@media screen and (max-width: 900px) {
.example-item {
display: block;
}
}
的jsfiddle:https://jsfiddle.net/mr_seven/1ktcqay4/2/ 你可以改变结果区域的宽度,看看有什么会,如果屏幕宽度的变化而发生。
说实话我想看看例如使用网格系统白手起家的网格系统,甚至更好结账柔性盒。
但是简单地回答你能做到这一点的问题:
.container{
text-align:center;
}
.box{
height:20px;
width:150px;
border:1px solid black;
display: block;
margin:0 auto;
}
@media only screen and (min-width: 768px) {
.box {
display: inline-block;
}
}
.box1{
background:steelblue;
}
.box2{
background:indianred;
}
.box3{
background:coral;
}
<div class="container">
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
</div>
使用Flexbox的和媒体查询,所需的布局都可以轻松实现
.example {
background-color: black;
padding: 10px 20px;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.example-item {
font-size: 0.7em;
padding: 10px 10px;
}
.example-item-1 {
background-color: blue;
}
.example-item-2 {
background-color: red;
}
.example-item-3 {
background-color: green;
}
@media screen and (max-width: 864px) {
.example {
flex-direction: column;
}
.example-item-1,
.example-item-3{
width: 50%;
}
.example-item-2 {
width: 70%;
}
}
<div class="example">
<div class="example-item example-item-1">abcabcabcabcabcabcabcabcabcabcabcabcabc</div>
<div class="example-item example-item-2">123456789012345678901234567890123456789012345678901234567890</div>
<div class="example-item example-item-3">xyzxyzxyzxyzxyzxyzxyzxyzxyzxyzxyzxyzxyz</div>
</div>
这里的jsfiddle