Держите DIV рядом друг с другом и делайте страницу с горизонтальной прокруткой, если содержимое DIV слишком большое - PullRequest
Новая
       41

Держите DIV рядом друг с другом и делайте страницу с горизонтальной прокруткой, если содержимое DIV слишком большое

0 голосов
/ 29 августа 2018

Я хочу сохранить два элемента 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;
}

  
    line 1    
line 2    
line 3    
line 4    
line 5    
line 6
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
    foo
ea commodo consequat
Duis aute irure dolor
in reprehenderit in
voluptate velit

В приведенном фрагменте все выглядит отлично. Однако, если одна из строк в #main div становится действительно длинной, то div не остаются рядом. Пример: http://jsfiddle.net/ouqamf5y/1/

Как я могу хранить эти div'ы рядом, независимо от ширины строк в div справа?

Это не дубликат Как получить эти два div'а рядом? , потому что этот вопрос не касается переполнения широких div > pre строк.

1 Ответ

0 голосов
/ 29 августа 2018

Вы не определили ширину для второго блока / правого блока.

Попробуйте использовать это: 

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

Как только вы определите ширину для обоих блоков, основные div останутся рядом. Проверьте это и дайте мне знать, если это работает.

...