2 divs и 100% рядом друг с другом

Довольно простой вопрос, но все пробовал.

то, что я хочу, - это 2 (фактически 5) divs рядом с eachother с классом "container", поэтому я могу сделать горизонтальный веб-сайт. Каждый div должен быть на 100% шире. поэтому 2 divs означают 2 экрана рядом с eachother.

Теперь это строка css:

.container { width: 100%; float: left; display: inline; }

Я не могу заставить их выстраиваться рядом друг с другом.

Вот визуальный, чтобы сделать его более понятным. image url для большего просмотра: http://www.luukratief.com/stackoverflow.png

Прокручивающая часть не проблема для меня, просто размещение divs.

Возможно ли это, используя проценты или это просто невозможно. Если да, скажите, пожалуйста, как это сделать с помощью css.

Спасибо заранее!

Ответ 1

Вы можете создать контейнер шириной 200%, а затем поместить два div внутри этого элемента с шириной 50%, чтобы вы могли убедиться, что один div всегда получает ширину экрана всех посетителей.

Например:

<div class="container">
    <div class="contentContainer"></div>
    <div class="contentContainer"></div>
</div>

И CSS:

.container {
    width: 200%;
}

.contentContainer {
    width: 50%;
    float: left;
}

Ответ 2

Как это выглядит для вас?

http://jsfiddle.net/2wrzn/19/

Обратите внимание, что граница не требуется. Я использовал его для тестирования. Включение этого также делает обертку одной из divs, поэтому она отключена.

Ответ 3

вы должны использовать display: inline-block; вместо float anf, затем обернуть все пять div в другой контейнер или использовать элемент body и добавить white-space: nowrap к нему.

Если дизайн невероятно совершенен в пикселях, вы можете удалить фактический "интервал слов" между встроенными блоками, удалив пробел в HTML или предоставив им отрицательный правый запас около 0.25em; но если вы прокрутите страницу до новой "страницы", вы ее вообще не заметите.

Пример скрипта

Код HTML:

<div class="container" id="p1">Page 1 => <a href="#p2">Next page</a></div>
<div class="container" id="p2">Page 2 => <a href="#p3">Next page</a></div>
<div class="container" id="p3">Page 3 => <a href="#p4">Next page</a></div>
<div class="container" id="p4">Page 4 => <a href="#p5">Next page</a></div>
<div class="container" id="p5">Page 5 => <a href="#p1">Next page</a></div>

CSS

html, body {margin: 0; padding: 0; height: 100%;}

body {white-space: nowrap;}

.container {
   display: inline-block;
   width: 100%;
   height: 100%;
}

.container {
   display: inline !ie7; /* for working inline-blocks in IE7 and below */
}

.container * {white-space: normal;}

#p1 {background: #fcf;}
#p2 {background: #ff0;}
#p3 {background: #cfc;}
#p4 {background: #abc;}
#p5 {background: #cba;}

Ответ 4

Если вы хотите их рядом друг с другом, они не могут быть на 100%. width: 100% заставит div взять всю ширину содержащего элемент, в этом случае полную ширину окна, которое я предполагаю.

Если вам нужны два экрана рядом друг с другом, вам нужно установить ширину каждого из них на 50%. Если я неправильно понял, вы зададите вопрос немного подробнее.

Ответ 5

Вы можете попробовать что-то вроде этого, но у вас могут возникнуть проблемы с совместимостью с IE и таблицей * (но вы можете рассмотреть http://code.google.com/p/ie7-js/, чтобы исправить что)

<!DOCTYPE html>
<html>
<head>
<style>
html { width: 500%; display: table; }
body { width: 100%; display: table-row; overflow-x: scroll}
.container { width: 20%; display: table-cell; }
</style>
<body>
<div class="container">Test1</div>
<div class="container">Test2</div>
<div class="container">Test3</div>
<div class="container">Test4</div>
<div class="container">Test5</div>

Ответ 6

Ширина% div - это процентная доля от ширины тегов, в которых они содержатся, и, в конечном счете, тега тела (т.е. не окна). Таким образом, тег body должен быть 100 * n, где n - количество тегов div, которые вы хотите бок о бок. В приведенном ниже примере есть 2 тега div, поэтому тело 200% (2 * 100). Каждый тег div; ширина - это процентная доля от ширины тега тела примерно 100/n (требуется меньше smidgen). Не забудьте указать маржу и отступы. Вот пример:

<html>
 <head>
  <style type="text/css">
    body{
     width:200%;
     margin:0%;
     padding:0%;
    }

    #dvScreen1, #dvScreen2{
     width:49.95%;
     height:80%;
     clear:none;

    }
    #dvScreen1 {
    float:left;
    border:solid black 1px
   }

   #dvScreen2{
    float:right;
    border:solid blue 1px
   }
  </style>
 </head>
 <body>
   <div id="dvScreen1">
   <p>Screen 1 stuff ...</p>
  </div>
  <div id="dvScreen2">
   <p>Screen 2 stuff ...</p>
  </div>
 </body>
</html>