我在尝试将 3 个div 从水平转换为垂直时遇到了大问题。下面的代码显示,对于大于 1200px 的屏幕,一切正常。我想要的是一种响应行为:通过减小浏览器的宽度,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>
https://jsfiddle.net/y7c96sp8/