Остановка обертывания содержала divs?

В настоящее время у меня есть настройка div в контейнере div, как показано ниже:

<div id="container">  
    <div id="element"> Element 1 content </div>  
    <div id="element"> Element 2 content </div>  
    <div id="element"> Element 3 content </div>  
    <div id="element"> Element 4 content </div>  
</div>

style.css:

.container {
width:200px;
overflow-x:auto;
overflow-y:hidden;
}  

.element {
width:100px;
float:left;
}

Здесь jsFiddle кода: http://jsfiddle.net/vZWTc/.

Итак, я хотел бы, чтобы каждый из элементов выстраивался рядом друг с другом (все 4 в одной строке), но имеют только первые два видимых (контейнер 200px, каждый элемент 100px, поэтому только 2 видны в время), в то время как пользователь может прокручивать (по горизонтали) на 3-й и 4-й элементы (поскольку они менее важны)

Однако с этой настройкой элементы 3 и 4 завершают следующую строку

обновление класса контейнера с помощью white-space:nowrap ничего не делает. Это влияет только на текст, а не на divs.

Любые идеи? Спасибо заранее!

Ответ 1

Используйте обертку div с общей шириной 4 элементов и установите контейнер в скрытое переполнение, пример html...

<div class="container">
  <div class="wrapper">
    <div class="element"> Element 1 content </div>
    <div class="element"> Element 2 content </div>
    <div class="element"> Element 3 content </div>
    <div class="element"> Element 4 content </div>
  </div>
</div>

и для css

.container { width:200px; overflow-x:auto; overflow-y:hidden; }
.wrapper { width: 400px; }
.element { width:100px; float:left; }

Ответ 2

Существует два метода:

1) Clearfix - добавлено в контейнер.

.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}

2) Очистка DIV - размещение после последнего плавающего элемента.

<div class="clear"></div>

.clear {
   clear:both;
   font-size:0;
}

Вы можете сохранить некоторую разметку в своей ситуации, используя вместо этого неупорядоченный список:

<ul id="container">  
    <li> Element 1 content </li>  
    <li> Element 2 content </li>  
    <li> Element 3 content </li>  
    <li> Element 4 content </li>  
</ul>

Таким образом вы можете стирать содержимое без дополнительного имени класса. Это также дает более смысловой смысл.

.container li {
   ...
}

Ответ 3

Divs - это элементы уровня блока, что означает, что они создают новую строку. Если вам нужны элементы уровня блока рядом с eachother, тогда их нужно будет плавать с помощью float:left или float:right. Не забудьте очистить их с помощью clear: both, когда вы хотите, чтобы материал начинал переходить на новые строки.

Чтобы предотвратить их обертку, вы можете использовать параметр overflow:.

Я также предлагаю использовать селектор прямого прямого CSS вместо указания того же класса element снова и снова. div.container > div { color: red; }

Ответ 4

Вы можете просто установить высоту: вот так

.container { width:200px; height:20px; overflow-x:auto; overflow-y:hidden; }
.element { width:100px; height:20px;  float:left; }


<div class="container">
<div class="element"> Element 1 content </div>
<div class="element"> Element 2 content </div>
<div class="element"> Element 3 content </div>
<div class="element"> Element 4 content </div>
</div>

Ответ 5

Во-первых, для этих полей использовать эти стили CSS - им нужно будет #container и #element соответственно. Либо это, либо измените его, чтобы использовать обертку div для обработки прокрутки.

Разметка:

<div id="container">
<div class="wrappingcontainer">
    <div class="element"> Element 1 content </div>
    <div class="element"> Element 2 content </div>
    <div class="element"> Element 3 content </div>
    <div class="element"> Element 4 content </div>
</div>

CSS

    #container { width:200px; overflow-x:auto; overflow-y:hidden; }
   .element { width:100px; float:left; }
   .wrappingcontainer{ width: 400px; }

Демо доступно здесь!