使缩略图水平滚动而不使用 nowrap答案

【问题标题】：Make thumbnails scroll horizontally without using nowrap使缩略图水平滚动而不使用 nowrap
【发布时间】：2014-10-26 08:16:45
【问题描述】：

我正在尝试使用 CSS 进行以下设计：

这个想法是让它在一个全宽容器中水平滚动。

我在包装器中添加了 white-space: nowrap，但由于文本太长，它会出现在容器中。这是问题的截图：

请查看直播的jsFiddlehere

HTML：

<div class="box">
    <div class="col-lg-4 box-item">
        <div class="content">
            <h2>Lorem Ipsum is simply dummy text of the printing and typeset industry. Lorem Ipsum has been the industry's standard dummy text ever hen an with new version look.</h2>
            <h3>Ahmad Shadeed <span>- Wamda</span></h3>
        </div>
    </div>
    <div class="col-lg-4 box-item">
        <div class="content">
            <h2>Lorem Ipsum is simply dummy text of the printing and typeset industry. Lorem Ipsum has been the industry's standard dummy text ever hen an with new version look.</h2>
            <h3>Ahmad Shadeed <span>- Wamda</span></h3>
        </div>
    </div>
</div>

CSS：

.box {
  white-space: nowrap;
  height: 300px;
  overflow-x: scroll;
  width: 100%;
  margin-top: 30px;
}
.box .box-item {
  background: #eeeeee;
  margin: 0 10px;
  transition: background 0.4s ease;
  display: inline-block;
  white-space: nowrap;
  float: none;
}

PS：我阅读了有关使用 display:table 和 table-cell 的信息，如果可以使用它们，有什么想法吗？

谢谢，

【问题讨论】：

给孩子禁用怎么样？即.content{white-space:normal}See in your fiddle
我也会将padding: 0px 10px; 添加到.content 规则中
@JNF 有效！谢谢 :) 让我们看看其他成员的建议。
你应该考虑使用溢出：隐藏；

标签： html css nowrap

【解决方案1】：

css 由内部元素继承。您可以通过添加诸如

之类的规则来为孩子指定合适的css

.content {
    white-space: normal;
    padding: 0px 10px;
}

In your fiddle

【讨论】：

请检查小提琴：jsfiddle.net/shadeed9/mm79vdwt/5 我从第一个中删除了一些文本，它的高度降低了。有没有办法固定高度？
在fiddle 中添加了h2 规则。您应该验证那里的设置高度是否真正满足您的需求。您可能需要调整。