响应式布局，左栏可向右移动
响应式布局，左栏可向右移动
提问于 2015-12-15 17:33:11
假设我们有一个响应式设计，有3列(所有3列都是动态内容，所以我们不知道它们的高度)
对于台式机：
对于tablet (左列向右移动)
我们实现这一目标的最好方法是什么？(我不介意使用flexbox或其他现代css规范)
回答 4
Stack Overflow用户
发布于 2015-12-15 17:50:57
你可以让这些元素在桌面上以1/3的宽度制作float: left，然后在平板电脑/移动设备上给它们50%的宽度，并制作1和3个float: right。
HTML：
<div class="b1">
1
</div>
<div class="b2">
2
</div>
<div class="b3">
3
</div>CSS：
div {
float: left;
width: calc(100%/3);
box-sizing: border-box;
}
@media (max-width: 600px) {
div {
width: 50%;
}
.b1,
.b3 {
float: right;
}
}Stack Overflow用户
发布于 2015-12-15 17:54:25
div{
border: 1px solid #333;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 20px;
float: left;
}
.div1{
background : yellow;
width: 25%;
}
.div2{
background : red;
width: 50%;
min-height: 400px;
}
.div3{
background : purple;
width: 25%;
}
@media (max-width: 768px){
.div1, .div3{
clear: right;
float: right;
width: 30%;
}
.div2{
width: 70%;
}
}<div class="div1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo reiciendis sapiente cumque optio incidunt, dolore impedit officiis ut tempore. Pariatur commodi perspiciatis ducimus laudantium atque sed eveniet explicabo animi ipsam!</div>
<div class="div2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo reiciendis sapiente cumque optio incidunt, dolore impedit officiis ut tempore. Pariatur commodi perspiciatis ducimus laudantium atque sed eveniet explicabo animi ipsam!</div>
<div class="div3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo reiciendis sapiente cumque optio incidunt, dolore impedit officiis ut tempore. Pariatur commodi perspiciatis ducimus laudantium atque sed eveniet explicabo animi ipsam!</div>
Stack Overflow用户
发布于 2015-12-15 17:44:05
试试这个，可能会有帮助。您可以根据自己的意愿编辑CSS
HTML代码：
<div class="wrapper">
<div class="left"> 1 </div>
<div class="middle">2 </div>
<div class="right"> 3 </div>
</div>CSS代码：
.wrapper div {float:left;margin-right:.5%;text-align:center;}
.wrapper div:last-child {margin-right:0;}
.left {background: yellow; width:33%}
.middle {background: green; width:33%}
.right {background: blue; width:33%}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/34285533
复制相关文章
相似问题
腾讯云开发者
