如何制作窗口大小折叠的框的CSS列表?

时间:2018-03-05 11:31:14

标签: css alignment

我的CSS不太好,所以我甚至不知道从哪里开始......但是我需要快速制作一个连续显示4个对象的列表(以及尽可能多的对象默认情况下,对象需要的行),当窗口大小较小时,4个对象不适合,它们会自动重新排列为每行2个...

是否有人有CSS代码的链接,实现了这一点?我甚至都不知道它是如何调用的,所以我不知道该搜索什么......

谢谢!

enter image description here

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'>
        &nbsp;<br>&nbsp;<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>

1 个答案:

答案 0 :(得分:1)

您必须使用css media queries

&#13;
&#13;
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;
&#13;
&#13;