我的CSS不太好,所以我甚至不知道从哪里开始......但是我需要快速制作一个连续显示4个对象的列表(以及尽可能多的对象默认情况下,对象需要的行),当窗口大小较小时,4个对象不适合,它们会自动重新排列为每行2个...
是否有人有CSS代码的链接,实现了这一点?我甚至都不知道它是如何调用的,所以我不知道该搜索什么......
谢谢!
CSS
#welcomemessage {
position: relative;
top: 5px;
left: 10px;
bottom: 0;
height: 100%;
background-color: rgba(255, 255, 255, 0);
max-width: 340px;
padding-left: 50px;
z-index: 1;
}
#maincontent {
position: relative;
display: block;
top: 0;
bottom: 0;
height: 100%;
background-color: rgba(255, 255, 255, 0);
max-width: 700px;
padding-left: 50px;
z-index: 1;
}
.appbox {
position: relative;
background-color: rgba(200, 200, 200, 0.6);
width: 120px;
height: 120px;
border-radius: 8px;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 15px;
padding-right: 15px;
margin-right: 25px;
margin-bottom: 25px;
float: left;
}
HTML
<div id='welcomemessage'>
Welcome to InfraNodus, <%= user.name %>.
Using this platform you can convert any text into network.
Try out our apps to see how it works.
</div>
<div id='maincontent'>
<br> <br>
<div class="appbox">Here we go</div>
<div class="appbox">Here we go again</div>
<div class="appbox">Here we go again</div>
<div class="appbox">Here we go again</div>
<div class="appbox">Here we go again</div>
</div>
答案 0 :(得分:1)
您必须使用css media queries
ul{
display: block;
width: 100%;
margin: 0;
padding: 0;
list-style: none;
}
li{
float: left;
width: 22%;
margin: 0 2% 10px 0;
padding: 30px 0;
border: 1px solid #000;
text-align: center;
}
@media (max-width: 640px) {
li{
width: 47%;
}
}
&#13;
<ul>
<li>This is a bloc</li>
<li>This is a bloc</li>
<li>This is a bloc</li>
<li>This is a bloc</li>
<li>This is a bloc</li>
<li>This is a bloc</li>
<li>This is a bloc</li>
<li>This is a bloc</li>
<li>This is a bloc</li>
<li>This is a bloc</li>
<li>This is a bloc</li>
<li>This is a bloc</li>
</ul>
&#13;