如何使一个人使用下来

How to make one bring using down?

本文关键字：何使 一个人      更新时间：2023-09-26

我要显示以下内容，所以在第一行:One Two，第二行:Three Four，第三行:Five。

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

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

一个相对简单的解决方案是使用flex-box方法:

/* 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).

您需要的媒体查询如下所示。同时，这里有一个快速测试的小提琴。只要展开和收缩(调整大小)窗口，看看你得到什么。

        @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>

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