2 делят оба 100% рядом друг с другом - PullRequest
Новая
       1

2 делят оба 100% рядом друг с другом

10 голосов
/ 06 июля 2011

Довольно простой вопрос, но пытался во всем.

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

Это строка css, которую я сейчас имею: 

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

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

Вот изображение, чтобы прояснить его. enter image description here URL изображения для большего просмотра: http://www.luukratief.com/stackoverflow.png

Часть прокрутки - это не проблема для меня, а просто расположение элементов.

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

Заранее спасибо!

Ответы [ 6 ]

12 голосов
/ 06 июля 2011

Вы можете создать контейнер с шириной 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;
}
4 голосов
/ 06 июля 2011

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

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

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

3 голосов
/ 06 июля 2011

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

Если дизайн невероятно идеален для пикселей,вы можете удалить фактический «интервал между словами» между встроенными блоками, удалив пробелы в HTML или задав им отрицательный правый отступ около 0,25em;но если переходить на новую «страницу», вы все равно не заметите ее.

Пример Fiddle

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;}
1 голос
/ 06 июля 2011

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

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

0 голосов
/ 25 апреля 2012

% ширины div - это процент ширины тегов, в которых они содержатся, и, в конечном счете, тега body (т. Е. Не окна).Таким образом, тег body должен быть 100 * n, где n - это количество тегов div, которые вы хотите расположить рядом.В приведенном ниже примере есть 2 тега div, поэтому тело составляет 200% (2 * 100).Каждый тег div;width - это процентная доля ширины тега body, примерно, 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>
0 голосов
/ 06 июля 2011

Вы можете попробовать что-то вроде этого, но у вас могут быть проблемы с совместимостью с 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...