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

Question

我希望并排放置两个 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 |  |
| +-------+  +-------------------------------------
+--------------------------------------------------

这是我的代码片段:

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>

在上面的代码片段中，一切看起来都很棒。但是，如果 #main div 中的某一行变得很长，则 div 不会保持并排。示例:http://jsfiddle.net/ouqamf5y/1/

无论右侧 div 中的线条宽度如何，我怎样才能将这些 div 并排放置？

---

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

Answer 1

您还没有为第二个 block /右边的 block 定义任何宽度。

尝试使用这个:

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

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