Как выровнять div по горизонтали?

Question

Как выровнять div по горизонтали?

0

Я пытаюсь создать серию divs, которые выравниваются по горизонтали и показывают только 1 div, которые покрывают весь экран.

Что-то вроде

div1    div2   div3    div4     div5…

Показывать только 1 div на экране, если пользователь не нажмет дальше.

Мой html

<section id='contents-wrapper' class='container'>
<article class='row'>
   <div>

   </div>
</article>

<article class='row'>
   <div>

   </div>
</article>

<article class='row'>
   <div>

   </div>
</article>

<article class='row'>
   <div>

   </div>
</article>
</section>

CSS

.row{
float: left;
min-width: 600px;
min-height: 800px;
width: 100%
}
.container{
width: 10000px;
}

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

FlyingCat 08 янв. 2014, в 19:14

Источник

0

пытаться сделать слайдер или что-то? что является причиной того, что нужно пропустить каждый оставшийся div, если вы показываете только один? почему бы не использовать position: absolute; left: 0; top: 0 внутри контейнера и показать / скрыть строки при событии?
tenub 08 янв. 2014, в 17:34
0

Я не понимаю series of divs that is horizontal align and only show 1 div that cover the whole screen. ? Что же происходит с остальными дивами?
BenM 08 янв. 2014, в 17:34
1

Почему ширина вашего контейнера 10 000 пикселей?
Cory Danielson 08 янв. 2014, в 17:37

Показать ещё 1 комментарий

Теги:

javascript

html

css

3 ответа

Ещё вопросы

пытаться сделать слайдер или что-то? что является причиной того, что нужно пропустить каждый оставшийся div, если вы показываете только один? почему бы не использовать position: absolute; left: 0; top: 0 внутри контейнера и показать / скрыть строки при событии?
Я не понимаю series of divs that is horizontal align and only show 1 div that cover the whole screen. ? Что же происходит с остальными дивами?
Почему ширина вашего контейнера 10 000 пикселей?

ooopsoft · Answer 1 · 2014-01-08T17-01-00.000Z

Удалить

ширина: 100%

из класса ".row",

это делает каждую ширину статьи = 10000px

Afzaal Ahmad Zeeshan · Answer 2 · 2014-01-08T16-18-00.000Z

Ты пробовал,

.row {
  display: inline-block; // as mentioned by bjb568
}

Кроме того, удалите все те теги article и добавьте только один тег article и добавьте все теги div качестве своих дочерних элементов.

@ bjb568 да, может быть, но только встроенный будет делать это :)
@AfzaalAhmadZeeshan нет, не будет. inline элементы не могут иметь указанную ширину.
@BenM, спасибо, я отредактировал ответ .. :)

bjb568 · Answer 3 · 2014-01-08T15-35-00.000Z

.theContainer {overflow: auto; white-space: nowrap;}
.theDivs {display: inline-block; width: 100%;}

JS:

document.getElementById('p').onclick = function() { //Back
    document.getElementById('container').scrollLeft = Math.round(document.getElementById('container').scrollLeft/document.getElementById('container').offsetWidth-1)*document.getElementById('container').offsetWidth;
}
document.getElementById('n').onclick = function() { //Forward
    document.getElementById('container').scrollLeft = Math.round(document.getElementById('container').scrollLeft/document.getElementById('container').offsetWidth+1)*document.getElementById('container').offsetWidth;
}

http://jsfiddle.net/KWwZP/