首页 新闻 会员 周边 捐助

css布局问题

0
悬赏园豆：10 [已解决问题] 解决于 2015-07-21 15:51
通过CSS完成下列布局，当宽度足够时，A、B、C为三个div ，布局为：
当宽度变小时，布局变为：
 
不是简单的float left，如果是的话，会出现第一行A、B，第二行C的情况，但是，我们不希望出现这样的情况。
maplecumt的主页 maplecumt | 初学一级 | 园豆：149
提问于：2015-07-21 13:42
< >
分享
最佳答案
1

楼上正解

 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
.block{ width:100px; height:100px; background-color:#5B9BD5; display:inline-block; margin-top:5px}
/*设备宽度小于600px，改变样式*/
@media screen and (max-width:600px){
    .block{ display:block}
}
</style>

</head>

<body>
    <div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
    <div>
</body>
</html>

 

收获园豆：5
电磁魔王喵喵 | 小虾三级 |园豆：1343 | 2015-07-21 15:35

哇塞，好酷炫的工具，这是个啥？

maplecumt | 园豆：149 (初学一级) | 2015-07-21 15:36

@maplecumt: 谷歌浏览器的控制台

电磁魔王喵喵 | 园豆：1343 (小虾三级) | 2015-07-21 15:39
其他回答(2)
0

float left

小眼睛老鼠 | 园豆：2731 (老鸟四级) | 2015-07-21 13:55

不是简单的float left。如果是的话，会出现第一行A、B，第二行C的情况，但是，我们不希望出现这样的情况。

支持(0) 反对(0) maplecumt | 园豆：149 (初学一级) | 2015-07-21 14:05

@maplecumt: 那你用响应式编程吧 

支持(0) 反对(0) 小眼睛老鼠 | 园豆：2731 (老鸟四级) | 2015-07-21 14:59

@小眼睛老鼠: 用js可以实现，但是还是希望只使用css来做。

支持(0) 反对(0) maplecumt | 园豆：149 (初学一级) | 2015-07-21 15:00

@maplecumt: 响应式编程不是 css么

支持(0) 反对(0) 小眼睛老鼠 | 园豆：2731 (老鸟四级) | 2015-07-21 15:05

@小眼睛老鼠: 额，不太了解响应式编程。那怎么用css实现呢？

支持(0) 反对(0) maplecumt | 园豆：149 (初学一级) | 2015-07-21 15:06
0

用CSS media标签

@media screen and (min-width:768px) { ... }

收获园豆：5
Echo.Liu | 园豆：385 (菜鸟二级) | 2015-07-21 15:21
清除回答草稿
   您需要登录以后才能回答，未注册用户请先注册。