无法显示两个以上的项目

Question

我正在创建一个网页，对于其中的一部分，我想在一行中显示三个对象。我能做的最好的事情是使用width:100%显示其中的2个。

有没有人有任何我可以尝试的提示，以便显示3/4？目前我有5个项目，每行2个。我正在使用的项目是列表。

在浏览器中查看：

我的CSS：

Answer 1

这是实现目标的一种方法，但请记住，有Bootstrap，Foundation和Skeleton等完整框架（仅举几例）可以让这更容易，而且它们随附他们自己的“三列”类，以及你可以拥有的十二列网格的任何其他变体，从1到12.一个框架带有许多你可能不需要的其他功能，所以如果你去了，请考虑这个框架路线。

但如果你只想连续三列，试试这个：

* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

.row {
  width: 100%;
  clear: both;
}

.container {
  max-width: 1200x;
  }

.row .onethird {
width: 33%;
  background: blue;
  float: left;
  color: white;
  padding: 0 1em;
}

<div class="container">
<div class="row">
<div class="onethird">THING ONE</div>
<div class="onethird">THING TWO</div>
<div class="onethird">THING THREE</div>
  </div>
</div>

需要注意的是，您需要在html文档的头部使用视口元标记，以便开始使用此代码执行响应式操作。

Answer 2

因为您不提供任何代码或任何有关您的框架的详细信息

您可以像下面一样划分列

＆＃13;

＆＃13;

.container{
  width: 100%;
}
.container div{
  width: 30%;
  border: 1px solid #ddd;
  height: 100px;
  float: left;
  margin: 1px; 0;
}

＆＃13;

<div class="container">
  
  <div>some text</div>
  <div>some text</div>
  <div>some text</div>
  
 </div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

 ul.products {width: 100%; margin: 0; padding: 0;} /* adjust as needed */
 ul.products li {float: left; width: 33.3%; width: calc(100% / 3); margin: 0; padding: 0;} /* the calculation is for browsers that support it. The 33.3% is for the browsers that don't. */
 ul.products:after {clear: left; display: table; content: ''} /* always clear your floats */