Question

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

我将向您展示一个例子：

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

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

Answer 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;
}

Answer 2

将overflow: scroll设置为#post-text可以帮助您。

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

2 个答案: