Приведение веб-страницы в соответствие с разрешением экрана

Question

У меня есть веб-страница со следующим содержимым ..

<div id="container">
  <div id="header"></div>
  <div id="lsidebar"> 
  </div>
  <div id="content">
  </div>
  <div id="rsidebar">
  </div>
</div>

Мне нужен контейнер, который всегда центрируется на экране.

ширина контейнера будет равна половине экрана. Я использую поле left-left для центрирования контейнера. Но оно отличается для разных браузеров.

Другая проблема: я добавляю float: left для lbar, content, rbar.но rbar переходит к следующей строке, как это ...

Вот мой css

#container
{
        position:absolute;
    width:75%;
    left:15%;



}
#header{width:100%;height:430px;}
#content{position:relative;top:0px;width:60%;}
#rsidebar{border:2px solid black;width:100px;height:200px;float:left;}
#footer{position:relative;top:10px;width:100%;}

как решить эту проблему ...

Answer 1

ширина контейнера будет равна половине экрана. Я использую поле left-left для центрирования контейнера.

Извините

Если контейнер составляет половину экрана, у вас будет width:50%. Если вы хотите центрировать его, у вас будет margin:0 auto;.

Существует только два соответствующих метода для центрирования элементов на странице: text-align:center; для содержимого, margin:0 auto; для блоков. У вас может возникнуть соблазн сделать что-то вроде margin-left:25%;width:50%;, но это, вероятно, не даст ожидаемых результатов во всех браузерах и вызовет слишком много проблем, поэтому старайтесь придерживаться техник, которые все используют годами, если вы не докажете, что ваша техника намного лучше.

Еще одна проблема: я добавляю float: left для lbar, content, rbar.но rbar перемещается на следующую строку

Возможно внешняя ширина трех панелей больше ширины контейнера . Обратите внимание, что мы говорим о внешней ширине, а не о width. Например, если элемент контейнера имеет ширину 1067 пикселей и содержит две панели по 200 пикселей и одну панель из 600 пикселей с полем в 50 пикселей, фактическая ширина трех панелей будет 200 × 2 + 600 = 1000, но внешняя ширина будет 1000 + 50 × 2 = 1100, т. е. больше 1067 пикселей.

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

---

Видя ваш исходный код, я не понимаю, почему вы используете position:absolute и position:relative почти для каждого элемента. Какой смысл?

1. Выравнивание контейнера

Чтобы выровнять контейнер, вы должны указать не только ширину, но и поля.

div#container{margin:0 auto;width:50%;}

2. Поплавок-лефт панели

Теперь, когда ваш контейнер заполнен половиной пространства и отцентрирован, давайте разместим панели.

Ваша правая панель имеет ширину 100 пикселей. Я полагаю, что ваша левая панель имеет такую ​​же ширину.

div#lbar,
div#rbar{width:100px;}

Давайте поплавать влево и всплыть направо:

div#lbar,
div#rbar{width:100px;float:left;} /* Apply this style to both side panels */
div#rbar{float:right;} /* Override the float:left of the preceding line */

Теперь мы хотим, чтобы центральная панель не заполняла пространство, уже заполненное двумя другими панелями:

div#content{margin:0 100px;}

Это все, что вам нужно сделать.

---

Я также могу предложить вам прочитать несколько книг о HTML / CSS. Глядя на ваш код, я могу предположить, что вы не очень знакомы с ним, и что некоторое чтение может улучшить как ваше понимание обоих языков, так и ваши навыки.

Answer 2

первый: укажите ширину контейнера и

margin-left auto; margin-right:auto;

Вы используете таблицу стилей сброса meyerweb?

Answer 3

Вы также можете использовать HTML5 или что-то вроде http://lessframework.com, чтобы указать условия для разных размеров экрана.

Answer 4

Вы можете использовать margin: auto для центрирования контейнера по горизонтали. Что касается боковых панелей, вы, вероятно, хотите lbar, rbar, content в разметке и float: left, float: right для lbar и rbar соответственно. Не забудьте поставить clear: both в нижний колонтитул на всякий случай.

Answer 5

Общая ширина lbar + content + rbar + поля + отступы, вероятно, больше, чем пространство в вашем контейнере; поэтому ваш rbar перемещается вниз.

Также используйте контейнерный раствор Даниэля