如果 DIV 内容太大，保持 DIV 并排，并使页面可水平滚动答案

【问题标题】：Keep DIVs side-by-side and make page horizontally scrollable if DIV contents too large如果 DIV 内容太大，保持 DIV 并排，并使页面可水平滚动
【发布时间】：2019-02-04 15:48:17
【问题描述】：

我希望将两个 div 并排放置，无论右侧 div 中内容的宽度如何。左边的 div 总是有很短的行。正确的 div 可能有很长的行。如果行很长，我只想让整个页面水平滚动。

这是基本布局：

(div)
+--------------------------------------------------
| (div>pre)  (div>pre)
| +-------+  +-------------------------------------
| |line 1 |  |
| |line 2 |  |  Make the page horizontally scroll
| |line 3 |  |  if needed based on the width of
| |line 4 |  |  content in this div. Keep these
| |line 5 |  |  divs side by side.
| |line 6 |  |
| +-------+  +-------------------------------------
+--------------------------------------------------

这是我的代码的 sn-p：

body, pre {
  margin: 0;
  padding: 0;
}

#container {
  border-style: solid;
  border-color: blue;
  white-space: nowrap;
}

#container::after {
  content: "";
  clear: both;
  display: table;
}

#sidebar {
  width: 100px;
  float: left;
  border-style: dashed;
  border-color: green;
}

#main {
  float: left;
  border-style: solid;
  border-color: red;
}

<div id="container">
  <div id="sidebar">
    <pre>line 1    
line 2    
line 3    
line 4    
line 5    
line 6</pre>
  </div>
  <div id="main">
    <pre>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
    foo
ea commodo consequat
Duis aute irure dolor
in reprehenderit in
voluptate velit</pre>
  </div>
</div>

在上面的 sn-p 中，事情看起来很棒。但是，如果#main div 中的某一行变得非常长，那么这些 div 就不会并排放置。示例：http://jsfiddle.net/ouqamf5y/1/

如何让这些 div 并排放置，无论右侧 div 中的线条宽度如何？

这不是How to get these two divs side-by-side? 的重复，因为该问题没有解决div > pre 宽行的溢出问题。

【问题讨论】：

How to get these two divs side-by-side?的可能重复
@truecam 不，不是重复的。该问题接受的解决方案不符合该问题要求的条件。示例：jsfiddle.net/c6242/10306

标签： html css css-float overflow

【解决方案1】：

您还没有为第二块/右块定义任何宽度。

尝试使用这个：

sidebar { width: 30%; float: left; }
main { width:68%; float: left; }

一旦您为两个块定义了宽度，主div 将保持并排。检查一下，让我知道它是否有效。

【讨论】：