插入更多文本时 DIV 没有变宽答案

【问题标题】：DIV isn't getting wider when inserting more text插入更多文本时 DIV 没有变宽
【发布时间】：2014-02-13 14:43:00
【问题描述】：

我想做一个水平滚动的投资组合网站，现在主页可以正常工作了。但是当插入更多文本时，我的传记页面并没有变宽。

我会用一个例子告诉你：

当有 2 列文本时，这就是我想要的样子；工作正常。 http://fjkip.nl/test/biografie.php
当有 3 列或更多列文本时会发生这种情况；绿色背景不会扩大。 http://fjkip.nl/test/biografie2.php

HTML：

<div id="content">

    <div id="scroll-wrapper2">

        <div id="post-text">

           *TEXT IN HERE*

        </div>

    </div>

</div>

CSS：

#content
{
    height: 350px;
    overflow: auto;

}

#scroll-wrapper2
{
    white-space: no-wrap;
}

#post-text
{
    background-color: #00ff00;
    height: 275px;
    font-size: 10pt;
    -webkit-column-width: 20em;
    padding: 10px 5px;
}

有谁知道如何解决这个问题？

【问题讨论】：

您的 HTML 格式似乎不正确，p 标记之外还有文本段落，请先尝试正确格式化，看看是否能解决问题
white-space: no-wrap; 无效，应为 nowrap。但你不想这样，删除这一行。
设置p标签内的所有段落。并删除了no-wrap，我在首页用过。

标签： html css wordpress multiple-columns horizontal-scrolling

【解决方案1】：

尝试将width 或max-width 添加到您的#post-text 容器中，并将overflow-x: scroll; 添加到您的样式表中。不确定您到底要完成什么，但这会将内容保留在页面上。您申请的width 需要根据您的站点设置进行更改，但这是一般的想法。

JSFiddle

#post-text
{
  background-color: #00ff00;
  height: 275px;
  max-width: 500px; /* change to desired width */
  overflow-x: scroll; /* added so scrollbar happens in this container */
  font-size: 10pt;
  -webkit-column-width: 20em;
  padding: 10px 5px;
}

【讨论】：

我想要#content 容器中的滚动条。所以左边的方块也会移动。就像它在这个页面上的工作方式一样：fjkip.nl/test/home.php 哦，我不知道宽度，这取决于里面有多少文本。
不是真的，我希望滚动条位于示例中的位置：fjkip.nl/test/biografie2.php。但如果这不可能，我必须这样做。
你可以试试这个fiddle。如果您想删除文本和框下方的背景颜色，您可能需要在 #content 内添加另一个换行，并在其中应用 background-color。
当我这样做时，background-color 再次没有文本那么宽。 fjkip.nl/test/biografie2.php
您没有更改我之前发布的小提琴中的所有 CSS。根据小提琴将背景颜色移动到#content。正如我之前提到的，如果您不希望背景颜色一直向下移动到滑块，那么您可以在 #content 内添加另一个包装器并在那里使用 background-color。

【解决方案2】：

将overflow: scroll 设置为#post-text 应该可以让你到达那里。

【讨论】：