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

您尚未为第二个块/右块定义任何宽度。

尝试使用此：

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

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

如果DIV内容太大，请并排放置DIV，并使页面水平滚动

1 个答案: