Question

我试图让一系列内部div在一个固定宽度的外部div内水平滚动。我有它工作，但唯一的问题是内部div中的文本不会包装并溢出下一个div，因为白色空间：nowrap在外部div，它完成滚动。我如何解决这个问题，以便内部div继续向右滚动，但文本是否适合内部div（红色框）？请看一下这个JSFiddle的代码：

Demo in Jsfiddle

HTML：

<div id="content">
    <div id="contentHolder">
        <div class="post">lorem ipsum dolor sit amet</div>
        <div class="post">lorem ipsum dolor sit amet</div>
        <div class="post">lorem ipsum dolor sit amet</div>
        <div class="post">lorem ipsum dolor sit amet</div>
        <div class="post">lorem ipsum dolor sit amet</div>
        <div class="post">lorem ipsum dolor sit amet</div>
        <div class="post">lorem ipsum dolor sit amet</div>
        <div class="post">lorem ipsum dolor sit amet</div>
        <div class="post">lorem ipsum dolor sit amet</div>
        <div class="post">lorem ipsum dolor sit amet</div>
        <div class="post">lorem ipsum dolor sit amet</div>
        <div class="post">lorem ipsum dolor sit amet</div>
        <div class="post">lorem ipsum dolor sit amet</div>
        <div class="post">lorem ipsum dolor sit amet</div>
        <div class="post">lorem ipsum dolor sit amet</div>
        <div class="post">lorem ipsum dolor sit amet</div>
        <div class="post">lorem ipsum dolor sit amet</div>
        <div class="post">lorem ipsum dolor sit amet</div>        
    </div>
</div>

CSS：

#content {
    margin:0px auto;
    background-color:#515151;
    width:600px;
    border-radius:5px;
    padding-top:20px; 
}   

#contentHolder {
    color:#fff;
    margin:0 auto;
    width:500px;
    height: 400px;
    background-color:#000000;
    border-radius:10px;
    overflow:auto; 
    white-space:nowrap;
}


.post {
    width:60px;
    height:300px;
    margin:10px;
    display:inline-block;
    font-size:12px;

    background-color:#700;
}

Answer 1

将white-space: normal;应用于.post

如何使用文本环绕水平滚动内部div

1 个答案: