推到侧面时的文本换行问题

Question

所以，我有一种两难的境地。

我希望文本最初在线加载，但是当一个元素（在两侧）宽度设置为一个值（200px）时，我希望它完全移到一边。

问题是，当元素（菜单）进来时，它只是将文本缩小到被推到一边的元素。实际div移到一边，但是文本将它向下推。

请参阅此处的内容，以及原来应该如何看待

然后，当菜单打开时，它会这样做

我尝试使用white-space:nowrap;，但这完全取消了自动换行。

我已经搜索到了这一点，但由于我的问题往往是我无法很好地关键字，或者无法找到解决此问题的好方法。

最终结果应该是开头的自动换行文本，然后包含文本的元素应该被推到视图外侧。

CSS：

/** Menu CSS **/
#menu-bar-container {
    float:left;
    background-color:#2c2c2c;
    height:100%;
}

 /** "News" element supposed to be pushed to the side **/
.app-content {
    overflow: hidden;
    position: relative;
}

.app-section {
    position: relative;
    width:100%;
}

HTML：

 <div id="server-news-container" class="app-content app-scrollable" style="height: 453px; overflow: scroll;">
      <div class="app-section">
           <i id="news-icon" class="fa fa-exclamation-triangle fa-lg"></i> 
           <span id="news-text">In-development, so the app may stop working at any point in time. You have been warned.</span>
           <div id="news-date">Sunday, June 15 2014</div>
      </div>
      <div class="app-section">
           <i id="news-icon" class="fa fa-info-circle fa-lg"></i>
           <span id="news-text">Test of the info thing</span> <div id="news-date">Saturday, June 14 2014</div>
      </div>
 </div>

非常感谢任何帮助或指示。

Answer 1

我猜你正在使用CSS来移动app-section或app-content。 如果您使用margin-left来显示菜单，它将按照您的示例所示进行挤压。

尝试使用左侧内容的位置。

left:100px;

这将保留内容的宽度，只是移动位置。

Answer 2

正如Chong Yu指出的那样，这是一个立场问题。 您需要在菜单出现时更改content { left:width-of-menu }，并在菜单崩溃时将其返回content { left:0 }。

如果您没有明确设置菜单的宽度，则需要在代码中的某个位置抓取它。为了便于解释，我们假设您将其设置为100px宽。

.parent.content, .parent.menu { position:relative }
.content { left:0; position:absolute }
.menu { display:none; width:100px }

Menu button is clicked and made visible:
.content { left:100px }
.menu { display:block }

Answer 3

尝试删除overflow: hidden;课程中的.app-content。

如下所示：

.app-content {
    position: relative;
}