Question

我试图在水平滚动的父div中水平堆积div，但由于某种原因，孩子divs拒绝这样做。如果我只在content-wrapper中添加内容（文本或图像），但是如果我添加div，事情就会崩溃，那么工作正常。

所有帮助高度赞赏

CSS

.wrapper {
background: #000000;
margin: auto;
position: relative;
width: 100%;
height: 100% !important;
}

.left-bar {
left: 0;
top: 0;
min-height: 100%;
width: 200px;
position: fixed;
z-index: 2;
margin: 0;
background-color: #999;
}

.top-bar {
top: 0;
min-width: 100%;
height: 150px;
position: fixed;
margin: 0;
margin-left: 200px;
background-color: #0F0;
}

.content-wrapper {
left: 200px;
margin-top: 150px;
min-height: 100%;
background-color: #06F;
overflow-x: scroll;
overflow-y: hidden !important;
white-space: nowrap;
position: absolute;
}

.content-column {
width: 250px;
height: auto;
margin: 0;
margin-right: 20px;
background-color: #F00;
float: left;
text-align: center;
}

HTML

<div class="wrapper">
<div class="left-bar">LEFT BAR</div>
<div class="top-bar">TOP BAR</div>
<div class="content-wrapper">
    <div class="content-column">TEXT<br /><img src="http://placehold.it/250x450" /><br />MORE TEXT</div>
    <div class="content-column">TEXT<br /><img src="http://placehold.it/250x450" /><br />MORE TEXT</div>
    <div class="content-column">TEXT<br /><img src="http://placehold.it/250x450" /><br />MORE TEXT</div>
    <div class="content-column">TEXT<br /><img src="http://placehold.it/250x450" /><br />MORE TEXT</div>
    <div class="content-column">TEXT<br /><img src="http://placehold.it/250x450" /><br />MORE TEXT</div>
    <div class="content-column">TEXT<br /><img src="http://placehold.it/250x450" /><br />MORE TEXT</div>
    <div class="content-column">TEXT<br /><img src="http://placehold.it/250x450" /><br />MORE TEXT</div>
</div><!-- end content wrapper -->
</div><!-- end wrapper -->

仅限内容/工作提示
的 HERE

Answer 1

div display:inline或display:inline-block

DEMO

<强> HTML

<div class="content-wrapper">
    <div>bleh</div>
    <img src="http://placehold.it/250x450" />
    <img src="http://placehold.it/250x450" />
    <img src="http://placehold.it/250x450" />
    <img src="http://placehold.it/250x450" />
    <img src="http://placehold.it/250x450" />
    <img src="http://placehold.it/250x450" />
    <img src="http://placehold.it/250x450" />
    <img src="http://placehold.it/250x450" />
    <img src="http://placehold.it/250x450" />
</div>

<强> CSS

.content-wrapper > div {
  display:inline-block;   
}

Answer 2

给“.content-wrapper”一个宽度。

.content-wrapper {
    left: 200px;
    margin-top: 150px;
    min-height: 100%;
    background-color: #06F;
    overflow-x: scroll;
    overflow-y: hidden !important;
    white-space: nowrap;
    position: absolute;
    width:100%;
}

纯CSS水平滚动问题

2 个答案: