Responsive 3栏
我希望我的3栏能够在移动设备上做出响应，而且我在做这件事上有困难。我知道这可能是个愚蠢的问题，但我是晚饭初学者，我试着学习。谢谢
这是im使用的代码：
<ul style="-webkit-column-count: 3; -moz-column-count: 3; column-count: 3; column-gap: 310px;">
<li>
<p>aaa</p>
</li>
<li>
<p>bbb</p>
</li>
<li>
<p>ccc</p>
</li>
<li>
<p>ddd</p>
</li>
<li>
<p>eee</p>
</li>
<li>
<p>fff</p>
</li>
<li>
<p>ggg</p>
</li>
<li>
<p>hhh</p>
</li>
<li>
<p>iii</p>
</li>
</ul>
回答 3
Stack Overflow用户
发布于 2021-08-23 19:22:22
从你的评论中暗示
@没有偏好，但如果我必须选择:)两者都可以。
您可以使用column-width而不是column-count，并最终通过clamp()调整其大小：
li {border:1px solid;margin-bottom:2px}<ul style=" column-width: clamp(310px, 30vw, 800px); ">
<li>
<p>aaa</p>
</li>
<li>
<p>bbb</p>
</li>
<li>
<p>ccc</p>
</li>
<li>
<p>ddd</p>
</li>
<li>
<p>eee</p>
</li>
<li>
<p>fff</p>
</li>
<li>
<p>ggg</p>
</li>
<li>
<p>hhh</p>
</li>
<li>
<p>iii</p>
</li>
</ul>
关于clamp()，请参阅：https://developer.mozilla.org/en-US/docs/Web/CSS/clamp()
关于column-width参见：https://developer.mozilla.org/en-US/docs/Web/CSS/column-width
Stack Overflow用户
发布于 2021-08-23 17:29:03
您可以使用网格，这是imao更明确的解决方案：
<div style="display: grid; grid-template-rows: 3; grid-template-columns: 3">
<p>Skvělé produkty</p>
<p>Rychlé doručení</p>
<p>Ochotu</p>
<p style="grid-row: 2">Přívětivé ceny</p>
<p style="grid-row: 2">Výhodné dopravné</p>
<p style="grid-row: 2">Spolehlivost</p>
<p style="grid-row: 3">Bleskovou expedici</p>
<p style="grid-row: 3">Férový obchod</p>
<p style="grid-row: 3">Bezodkladnou reklamaci</p>
</div>
编辑:聊天中的例子：
<div style="display: grid; grid-template-rows: 2; grid-template-columns: 3">
<li>Skvělé produkty</li>
<li>Rychlé doručení</li>
<li>Ochotu</li>
<li style="grid-row: 2">Skvělé produkty 2</li>
<li style="grid-row: 2">Rychlé doručení 2</li>
<li style="grid-row: 2">Ochotu 2</li>
</div>
<div style="display: grid; grid-template-rows: 2; grid-template-columns: 3">
<p><img src="https://i.stack.imgur.com/PDGGj.png" style="vertical-align: middle">Skvělé produkty</p>
<p><img src="https://i.stack.imgur.com/PDGGj.png" style="vertical-align: middle">Rychlé doručení</p>
<p><img src="https://i.stack.imgur.com/PDGGj.png" style="vertical-align: middle">Ochotu</p>
<p style="grid-row: 2"><img src="https://i.stack.imgur.com/PDGGj.png" style="vertical-align: middle">Přívětivé ceny</p>
<p style="grid-row: 2"><img src="https://i.stack.imgur.com/PDGGj.png" style="vertical-align: middle">Výhodné dopravné</p>
<p style="grid-row: 2"><img src="https://i.stack.imgur.com/PDGGj.png" style="vertical-align: middle">Spolehlivost</p>
</div>
Stack Overflow用户
发布于 2021-08-23 18:15:34
这是一些方法，以作出反应的网页设计。但我认为使用css @media很容易
@media only screen and (max-width: 768px) {
.left,
.right {
float: none;
width: 100%;
}
}<!DOCTYPE html>
<html>
<head>
<title>Media responsive</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.left,
.right {
height: 400px;
}
.left {
background: blue;
float: left;
width: 60%;
}
.right {
background: red;
float: right;
width: 40%;
}
</style>
</head>
<body>
<div class="container">
<div class="left">
LEFT
</div>
<div class="right">
RIGHT
</div>
</div>
</body>
</html>
正如您在上面看到的，我创建了两个元素浮动的两个侧面。但是当使用小屏幕(<768 it )时，您将看到它变成一行
您可以在这里阅读更多内容：W3响应网络
有一件事记在心里：
- 考虑使用rem、vh、vw、em而不是px，因为它喜欢%并适合响应。
- 总是添加元视图
https://stackoverflow.com/questions/68896656
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号