Question

我正在尝试创建一个无限可滚动的行，以显示信息项。

我按照下面的设置进行了设置，它使项目与持有者的尺寸相同。我尝试过使用内联块，但是在一列中显示了这些项目：

更新：链接是需要出现在项目底部的元素，我已尝试定位绝对，这将完全从项目中删除标签。我也累了垂直对齐：底部没有效果。

非常感谢任何帮助。

.holder {
  overflow-x: scroll;
  overflow-y: visible;
  height: 550px;
  width: 100%;
  padding: 0;
}
.item_row {
  display: -webkit-inline-box;
  list-style: none;
  padding: 0;
}
.item {
  width: 300px;
  background: #fff;
  margin: 0 10px 0 10px; 
}

<div class="holder">
  <div class="item_row">
    <div class="item">
      <!-- Info --> 

<a href="#" class=""> need to appear at bottom </a>
    </div>
  </div>
</div>

Answer 1

这是你现在的解决方案。如果您在项目中没有内容，为什么链接会降到最低点。 -webkit - 内联框只工作chrome这就是为什么我在.item-row类中添加了两个额外的显示快乐的编码享受和好运

.holder {
  overflow-x: scroll;
  overflow-y: visible;
  height: 550px;
  width: 100%;
  padding: 0;
}
.item_row {
   display: -webkit-inline-box;
    display: -moz-inline-box;
   display: -ms-inline-box;
   list-style: none;
   padding: 0;
  }
.item {
  width: 300px;
  background: #fff;
  margin: 0 10px 0 10px; 
}


<body>
 <div class="holder">
  <div class="item_row">
    <div class="item">
  <!-- Info --> 
   <img src="http://cdn.online-convert.com/images/image-converter.png"    
    alt="test">
    <h1>test</h1>
    <p>test</p>
   <p>test</p>
   <a href="#" class=""> need to appear at bottom </a>
 </div>
<div class="item">
  <!-- Info --> 
 <img src="http://cdn.online-convert.com/images/image-converter.png"
     alt="test">
    <h1>test</h1>
     <p>test</p>
     <p>test</p>
       <a href="#" class=""> need to appear at bottom </a>
     </div>

   </div>

 </div>

</body>

`webkit-box`改变元素的高度

1 个答案: