Переменная ширина тела

У меня есть простая HTML-страница с 3 «столбцами» (300px x 100%), которые имеют вертикальную полосу прокрутки. Это отлично работает при наличии окна шириной не менее 900 пикселей. Однако, когда я изменяю размер окна меньше, чем столбцы, один (или более) столбцов сбрасывается, чтобы соответствовать окну по вертикали. Это не то, что я хочу, потому что для этого требуется, чтобы пользователь прокручивал весь путь до того, как смог увидеть другой столбец.Переменная ширина тела

Что я хочу, это довольно просто: способ заставить браузер подогнать столбцы по горизонтали, даже если он не подходит. width: 900px; на теле не является решением, которое я хочу использовать, потому что количество столбцов (и их ширина) является переменной.

Другими словами: как заставить браузер поместить мои элементы горизонтально на страницу и остановить перемещение элементов?

[править] Мой текущий код (ну, это не реальный код, но он показывает, что проблема есть):

<!DOCTYPE html> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
     <style> 
      * { 
       margin: 0; 
       padding: 0; 
      } 

      body, html { 
       height: 100%; 
      } 

      body { 
       overflow-x: scroll; 
      } 

      .column { 
       width: 300px; 
       height: 100%; 
       float: left; 
       overflow-x: hidden; 
       overflow-y: scroll; 
      } 
     </style> 
    </head> 
    <body> 
     <div class="column"></div> 
     <div class="column"></div> 
     <div class="column"></div> 
     <div class="column"></div> 
    </body> 
</html>

источник

2010-12-28 Tom van der Woerdt

Только для пояснения, когда вы говорите, что сила соответствует горизонтали, вы имеете в виду, что браузер должен показывать горизонтальную полосу прокрутки? – JYelton

Да. Он уже существует ('overflow-x: scroll'), но он фактически не помещает столбцы горизонтально на страницу. –

Не могли бы вы дать образец тега, который не работает? Вы хотите, чтобы ширина была в процентах вместо пикселей? –

<!DOCTYPE html> 
<html> 
    <head> 
    <style> 
     * { margin: 0px; padding: 0px; } 

     body, html { height: 100%; } 

     body { 
     overflow-x: scroll; 
     white-space: nowrap; // prevent 'text' from wrapping 
     } 

     .column { 
     display:inline-block; // make them behave like 'text' 
     width: 300px; height: 100%; 

     overflow-x: hidden; overflow-y: scroll; 
     } 
    </style> 
    </head> 
    <body> 
    <div class="column"></div> 
    <div class="column"></div> 
    <div class="column"></div> 
    <div class="column"></div> 
    </body> 
</html>

источник

2010-12-28 20:15:40 Jan

Спасибо, это сработало! По-прежнему беспорядок с колонками много, но я уверен, что это можно исправить. :-) –

убедитесь, что вы устанавливаете 'white-space: normal;' для столбцов. В противном случае ваш текст больше не будет завернут. – zzzzBov

три «колонны» должны находиться в одном контейнере с контейнер CSS установлен в 'nowrap'

<div style='white-space: nowrap;'> 
    <div id='col1'></div> 
    <div id='col2'></div> 
    <div id='col3'></div> 
</div>

источник

2010-12-28 19:52:54

Нет, это не работает. Мой текст обернут, но элементов нет. –

Я немного изменил свой код, и теперь он работает. :-) –

Да, это не работает с поплавками. Но это привело меня к моему ответу так: ** + 1 ** – Jan

AFAIK нет возможности перекрестного браузера для создания семантических столбцов (без JavaScript).

here - это ответ, который я дал аналогичному вопросу.

HTML:

<div class="parent"> 
    <div class="child">...</div> 
    <div class="child">...</div> 
    <div class="child">...</div> 
</div>

CSS

.parent 
{ 
    display: table-row; 
} 

.child 
{ 
    display: table-cell; 
    width: 300px; 
}

Я считаю, что IE 9 < имеет проблемы с этим, так что вам необходимо установить калибровки и позиционирование вручную с помощью JS для IE.

источник

2010-12-28 19:54:04 zzzzBov

К счастью, это проблема только для веб-китов, поэтому кросс-браузер не проблема. Однако ваше решение, похоже, не работает. Все, что он делает, это удалить все полосы прокрутки из столбцов, но они не помещают их рядом друг с другом. –

Убедитесь, что вы все еще не плаваете. – zzzzBov

Если я перестану плавать элементы, размер столбцов изменится. Вместо этого мне нужна полоса прокрутки. :-) –

Переменная ширина тела

ответ

Смежные вопросы