Есть ли надежный способ расположить контент по сторонам div, и он появляется только в том случае, если это позволяет разрешение пользователя? - PullRequest
Новая
       7

Есть ли надежный способ расположить контент по сторонам div, и он появляется только в том случае, если это позволяет разрешение пользователя?

4 голосов
/ 28 мая 2009

У меня есть моя разметка, как это (ради аргумента) 

<div id="content"></div>
<div id="layout"></div>
<div id="layout2"></<div>

Тогда я использую этот CSS 

#content {
    width: 800px;
    height: 600px;
    margin: 0 auto;
} /* place this attached to the top of the page */

#sidebar,
#sidebar2 {
    display: block;
    width: 139px;
    height: 100%;
    position: absolute;
    top: 0;
    background: url(../images/layout/pretty.png) repeat-y;
}

#sidebar {
    left: 50%;
    margin-left: -700px;
} /* at this point, it appears to the left, and does not trigger scrolling when the window is resized.. it just slides off to the left */

#sidebar2 {
    right: 50%;
    margin-right: -700px;
} /* now, when you resize, the scrollbar appears as if the content stretches from #sidebar to #sidebar2 */

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

Так что мой вопрос, есть ли способ позиционирования 2-х div, который не повлияет на интерпретацию браузером ширины страницы (т. Е. Когда вы изменяете размер более узкого или меньшего разрешения, div просто скрываются за пределами области просмотра ?)

Спасибо!

EDIT

Спасибо за ответы, ребята, но никто не может дать мне то, что я хочу. Важно то, что эти div, которые появляются снаружи, должны быть связаны с #content div. Они должны появиться слева и справа и прислониться к #content. Однако, как только размер окна браузера изменяется, чтобы не вместить их, они должны исчезнуть в области просмотра. Я бы предпочел не использовать overflow-x: hidden, поскольку я хотел бы, чтобы люди с небольшими разрешениями / окнами могли прокручивать влево и вправо, чтобы увидеть весь контент.

Ответы [ 5 ]

4 голосов
/ 28 мая 2009

Это возможно, потому что я это сделал.

Хитрость заключалась в том, чтобы использовать отрицательные поля в абсолютно позиционированных элементах div. По какой-то причине браузер не пытается обеспечить прокрутку объектов, извлекаемых со страницы таким образом.

Вы также можете использовать переполнение: скрытый. Это начнет обрезать содержимое вашего div'а, когда сам div сжимается (убедитесь, что div использует процент или автоматическую ширину, чтобы он действительно уменьшился). 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Cropped sides (no scrollbars)</title>
<style>
div.decor {
    border: 3px solid red;
    overflow: hidden;
    position: absolute;
    width: 48%;
    height: 500px;
    top: 2%;
}
div.content {
    width: 60%;
    height: 300px;
    margin: 100px auto;
    padding: 10px;
    background-color: #DDF;
    opacity: 0.7;
    position: relative; /*hmmm.. without this content goes behind decor regardless of z-index... why?*/
}
</style>
</head>

<body>

    <div class="decor" style="right:50%"><img src="images/teacher.jpg" width=400 style="position:absolute;right:0px;"></div>
    <div class="decor" style="left:50%"><img src="images/teacher.jpg" width=400></div>

    <div class="content">lorem ipsum</div>
</body>

</html>

Демо: http://test.dev.arc.net.au/cropped_sides.html

Ключевые моменты:

  • переполнение: скрыто на абсолютно позиционированный декор divs
  • вправо: 0 по содержанию левого декора (заставляет обрезаться с левой стороны)
  • непозиционированный контент идет за декор независимо от z-index, но я не знаю почему Простой обходной путь использовать положение относительно вашего Контентная оболочка.
1 голос
/ 28 мая 2009

Очень просто с абсолютным позиционированием. Вы можете абсолютно позиционировать фон и назначить ему более низкий z-индекс, чем у основного контента. Пример только с правой стороны - цвет фона добавлен для наглядности: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
            "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title>Absolute Test</title>
<style type="text/css">
#content {
position: relative;
    width: 800px;
    height: 600px;
    margin: 0 auto;
background-color: blue;
z-index: 100;
} /* place this attached to the top of the page */
#layout2 {
height: 100px;
width: 100px;
z-index: 1;
position: absolute;
right: 50px;
top: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<div id="content"></div>
<div id="layout"></div>
<div id="layout2"></<div>
</body>
</html>

Работает также с картинкой: 

#layout2 {
height: 600px;
width: 100px;
z-index: 1;
position: absolute;
right: 50px;
top: 0;
background: url(right-side.gif) repeat-y;

Абсолютное позиционирование удаляет его из потока, поэтому браузер не добавит ширину вашего фона к размеру окна. Поскольку ваш контент имеет фиксированную ширину, он будет работать даже с IE6.

0 голосов
/ 02 июня 2009

В качестве альтернативы, вы можете поместить два «плавающих» элемента div в контейнерный элемент div, установленный на максимальную ширину, и установить для параметра «переполнение» значение «hidden».

Это самый простой способ!

есть. Что-то на этот счет: 

<div id="wrap">
<div id="left></div>
<div id="center"></div>
<div id="right"></div>
</div>

CSS: 

#wrap{
    width:800px;
    overflow:hidden;
}
0 голосов
/ 28 мая 2009

Да, вы можете сделать это, но только в левой части экрана.

Если у вас есть контент справа (вне области просмотра), браузер добавит горизонтальные полосы прокрутки. Единственное исключение - если вы отключите полосы прокрутки, но это невозможно сделать только горизонтально во всех браузерах.

Вернемся к идее с левой стороны ... Элементы, расположенные с левой стороны окна просмотра, не вызывают горизонтальную полосу прокрутки. Вы можете иметь фиксированную ширину макета, которая центрируется на экране (автоматические поля с обеих сторон), тогда изнутри этой области вы можете расположить новый столбец в левом пространстве. Если окно просмотра браузера узкое, вы его не увидите, если оно широкое, оно будет полностью видимым и пригодным для использования. Единственная проблема в том, что если он посередине - ваша левая колонка будет отрублена - это может выглядеть немного грязно!

Другой альтернативой является определение ширины области просмотра с помощью JavaScript и отображение столбца только при наличии места?

0 голосов
/ 28 мая 2009

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...