html - 插入更多文本时 DIV 不会变宽

Question

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

我给你举个例子:

1. 当有 2 列文本时，这就是我希望的样子；工作正常。 http://fjkip.nl/test/biografie.php

2. 当有 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;
}

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

Answer 1

尝试将 width 或 max-width 添加到您的 #post-text 容器，并添加 overflow-x:滚动; 到你的样式表。不确定您到底要完成什么，但这会将内容保留在页面上。您应用的 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;
}