Div плавающий рядом с переполнением? - PullRequest
Новая
       24

Div плавающий рядом с переполнением?

4 голосов
/ 12 декабря 2011

У меня есть div-оболочка, и внутри я хочу, чтобы div-ы были рядом.Я хочу, чтобы сторона оболочки была исправлена, чтобы при добавлении большего количества элементов div они переполнялись горизонтально !!

Кроме того, я хочу, чтобы ширина обёртки была фиксированной!Поэтому я хочу, чтобы посты внутри переполнялись внутри оболочки!

Я хочу использовать класс, чтобы у меня было что-то вроде 

 <div id="wrapper">
      <div class='post'>Post 1</div>
      <div class='post'>Post 2</div>
      <div class='post'>Post 3</div>
 </div>

Как мне это сделать ?!: p

ура !!

Ответы [ 5 ]

4 голосов
/ 12 декабря 2011

Вы после чего-то как это ?Для этого используется вторая div внутри вашей обертки: сама обертка имеет фиксированную ширину, а для overflow-x установлена ​​прокрутка: 

#wrapper {
    margin: 20px;
    padding: 20px;
    width: 300px;
    overflow-x: auto;
    background: #eee;
    border: 1px solid #333;
}

#wrapper>div {
    width: 600px;
}

.post {
    background: #fff;
    border: 1px solid #e4e4e4;
    float:left;
    margin-left: 20px;
    padding: 40px;
}

.post:first-of-type {
    margin-left: 0;
}
3 голосов
/ 12 декабря 2011 
#wrapper {
display: block;
width: 600px;
height: 100px;
overflow-x: auto;
overflow-y: hidden;
background: #900;
white-space: nowrap;}

.post {
display: inline-block;
width: 250px;
height: 100px;
background: #c00;
margin: 0 5px; }

Образец Jfiddle здесь

1 голос
/ 12 декабря 2011

Насколько я понимаю, вы хотите, чтобы ваши посты прокручивались горизонтально и располагались рядом.

Для этого вам понадобится добавить дополнительную обертку, например: 

<div id="wrapper">
 <div id="contentWrapper">
      <div class='post'>Post 1</div>
      <div class='post'>Post 2</div>
      <div class='post'>Post 3</div>
      <div class='post'>Post 4</div>
      <div class='post'>Post 5</div>
      <div class='post'>Post 6</div> 
      <div class='post'>Post 7</div>
      <div class='post'>Post 8</div>
 </div>

Вот CSS для достижения желаемого эффекта: 

#wrapper {
    width:400px;
    height:200px;
    overflow: auto;
}
#contentWrapper {
    float: left;
    margin-right: -30000px;
}
.post {
     width:100px;
     height:100px;
     display:inline-block;
}

Рабочий пример можно найти здесь: http://jsfiddle.net/QNXmk/1/

1 голос
/ 12 декабря 2011

Установите для div-обертки переполнение: auto для прокрутки, auto width для изменения размера (хотя для корректной работы вам понадобится установить абсолютное значение, я думаю - не забудьте установить родителя в положение относительное для точной вершины: x и left: x в sub div), затем float: покинул класс .post.

0 голосов
/ 12 декабря 2011

Я хотел бы добавить, что вы не будете знать общую ширину вашего контейнера содержимого.Единственное решение для определения общей ширины, основанной на сумме общей ширины ваших сообщений, - это использование javascript.

Вот пример небольшого скрипта, который сделает это: 

/* adjust the size (width) of the posts container
 * this depends on all its posts widths
 */

function setWrapper(){
    var finalW = 0;
    itemsWrapper = $(".posts-container");
    itemsWrapper.find('.post').each(function(i){
        var $post = $(this);
        finalW+=$post.width();
    });
    itemsWrapper.css('width',finalW+'px');
    console.log("Your total width is: "+finalW);
}
setWrapper();

При этом вы установите правильный размер контейнера сообщений, не передавая его явно в css.

...