Question

我要显示以下内容，所以在第一行：One Two，second row：Three Four，third row：Five。

我怎么能这样做，一定会接受答案。

      <div>
        <div>Four</li>
        <div>Five</li>
      </div>

Answer 1

您需要的媒体查询如下所示。同时，here is a Fiddle for quick-testing。只需展开和收缩（调整大小）窗口，看看你得到了什么。

        @media screen and (max-width: 600px) {
            ul li{
                display: inline-block;
                width:50%;
                padding:15px;
                box-sizing: border-box;
                margin:0;
                float:left;
            }
        }

示例：

ul,li{
list-style:none;
}
@media screen and (max-width: 600px) {
ul li{
	display: inline-block;
	width:50%;
	padding:15px;
	box-sizing: border-box;
	margin:0;
	float:left;
}
}

 
<html>
<head>
<title>test</title>
</head>
<body>
<ul style={{listStyleType: 'none'}}>
<li style={{display: 'inline'}}>One</li>
<li style={{display: 'inline'}}>Two</li>
<li style={{display: 'inline'}}>Three</li>
<li style={{display: 'inline'}}>Four</li>
<li style={{display: 'inline'}}>Five</li>
</ul>

</body>

</html>

Answer 2

@media screen and (max-width: 600px)
{
    ul > li:nth-child(odd)
    {
        clear: both;
    }
}

Answer 3

一个相对简单的解决方案是使用弹性框方法：

/* Setting up the basic 'default' display
   options: */
ul,
li {
  list-style-type: none;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
ul {
  /* display: flex sets up the <ul> element
     to contain flex-items: */
  display: flex;
  /* this establishes whether the model should
     be row-based or column-based: */
  flex-direction: row;
  /* stretches the flex-items (the <li>) to
     fill the space: */
  align-items: stretch;
  /* defines whether the children may, or may
     not, wrap to a new line: */
  flex-wrap: nowrap;
}
li {
  display: flex-item;
  /* 0:   'flex-grow',
          the amount by which the particular
          element may grow, relative to its
          siblings.
  
     1:   'flex-shrink',
          the amount by which the element
          may shrink relative to its
          siblings.
  
     20%: 'flex-basis',
          the initial width of the particular
          element relative to its container.
  */
  flex: 0 1 20%;
  border: 2px solid #000;
  border-radius: 0.5em;
  line-height: 2em;
  text-align: center;
}
@media screen and (max-width: 600px) {
  ul {
    /* we want the elements to wrap to
       new lines at this point, so we
       change 'nowrap' to 'wrap': */
    flex-wrap: wrap;
  }
  li {
    /* here, the flex-grow is set to 2,
       meaning that an element can grow
       to twice the size of a sibling,
       flex-shrink remains the same, and
       flex-basis is now 50%, because we
       want either one or two (at most)
       elements per line: */
    flex: 2 1 50%;
  }
}
@media screen and (max-width: 200px) {
  ul {
    flex-wrap: wrap;
  }
  li {
    /* while you didn't specify an alternate
       view rule for smaller screen widths, I
       added this to show how flex-boxes can
       be used to switch to a one-element per
       row alternative at tiny widths, simply
       by setting the flex-basis to 100%: */
    flex: 0 1 100%;
  }
}

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>

JS Fiddle demo

当然，上面假设您希望单独<li>元素在其自己的行上具有该行的全宽;如果情况并非如此，那么您可以简单地将flex: 2 1 50%行替换为flex: 0 1 50%，这样可以防止一行中的项目与其兄弟姐妹相关而增长。

ul,
li {
  list-style-type: none;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
ul {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  flex-wrap: nowrap;
}
li {
  display: flex-item;
  flex: 0 1 20%;
  border: 2px solid #000;
  border-radius: 0.5em;
  line-height: 2em;
  text-align: center;
}
@media screen and (max-width: 600px) {
  ul {
    flex-wrap: wrap;
  }
  li {
    flex: 0 1 50%;
  }
}
@media screen and (max-width: 200px) {
  ul {
    flex-wrap: wrap;
  }
  li {
    flex: 0 1 100%;
  }
}

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>

JS Fiddle demo

参考文献：

“Using CSS flexible boxes”（MDN）。

怎么让一个人带下来？

3 个答案: