Question

我是html的新手，当div进入max-height时，我试图将这些div向右移动。

＆＃13;

.List {
  overflow: hidden;
  max-height: 50px;
}

＆＃13;

<ul class="List">
  <div> one </div>
  <div> two </div>
  <div> three </div>
  <div> four </div>
  <div> five </div>
</ul>

＆＃13;

它只显示＆＃34;一，二，三＆＃34;，我希望另一个也显示出来，而是延伸到页面底部，向右延伸。

Answer 1

这是因为您将max-height设置为溢出，以便隐藏其他元素。

你不能直接在ul里面设置div。这不是正确的HTML。

尝试一起使用ul和li。

.List {
  overflow: hidden;
  max-height: 50px;
  text-align:right;
}
.List li{
  display: inline-block;
}

<ul class="List">
  <li> one </li>
  <li> two </li>
  <li> three </li>
  <li> four </li>
  <li> five </li>
</ul>

Answer 2

添加display：inline-block;对于div。

<ul class="List">
  <div> one </div>
  <div> two </div>
  <div> three </div>
  <div> four </div>
  <div> five </div>
</ul>

{{1}}

希望这有帮助

Answer 3

.list{
display:flex;
flex-direction:column;
max-height:50px;
flex-wrap:wrap;
}

.list div{
width:50px;
}

<div class="list">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
</div>

您可以使用flex。使用属性flex-wrap:wrap;，您的列表将根据父级高度进行调整。

Answer 4

如果您的要求是关于，一旦第一列到达var calculator = { displayer: document.querySelector(".display"), numbers: document.querySelectorAll(".number"), keys: document.querySelectorAll(".key"), inputting: function(){ for (var key in this.keys) { key.addEventListener("click", function(){ this.displayer.innerHTML += key.innerHTML; }) } }, }剩下的东西应该移到第二列，那么您可以使用max-height来完成。

添加flex和flex-flow：column wrap`将帮助您将内容传输到下一列。

display: flex

.List {
  overflow: hidden;
  max-height: 60px;
  border: 1px solid #ccc;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: column wrap;
  flex-flow: column wrap;
}

Answer 5

不允许Div作为ul的直接子女

因此更改ul的{{1}}或div的{{1}}，并使用display block propertie将元素显示为块元素。

＆＃13;

divs

＆＃13;

li

＆＃13;

Answer 6

首先，您的HTML代码中存在语义问题。 HTML规范不允许作为子项放入ul（未排序列表）div元素。您必须为此项目使用<li>（列表项）标记。

对于您的任务，您可以使用flexboxes。

通过设置display: flex来设置元素flex。然后使用flex-flow属性指定您希望子元素作为列，并在它们不适合目标块的高度时进行换行。

要使用此决定，请确保您需要的所有浏览器都支持Flexbox格式化。要查看此内容，请使用caniuse服务。

要使flexbox在不同的浏览器引擎上工作，请同样使用autoprefixer代码：http://autoprefixer.github.io/

实施例：

body {
  padding: 10px;
}

.list {
  background: #fff;
  overflow: hidden;
  max-height: 60px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  display: -webkit-flex; 
  -webkit-box-orient: vertical; 
  -webkit-box-direction: normal; 
      -ms-flex-flow: column wrap; 
          flex-flow: column wrap; 
}

<div class="list">
  <div> one </div>
  <div> two </div>
  <div> three </div>
  <div> four </div>
  <div> five </div>
</div>

此外，如果您想将项目分组到列中，可以使用CSS3 Multicolumn Layout

将Div的列表扩展到右侧

6 个答案: