Как я могу заставить эти divs работать на маленьких экранах?

Question

Так что на моем экране это отлично работает во всех браузерах, но когда я пытаюсь просмотреть мой сайт на ноутбуке или на меньшем экране #sidebar и #center перемещаться влево. Я предполагаю, что это имеет какое-то отношение к краю # боковой панели слева, но есть ли другой способ сделать боковую панель и центр под заголовком и рядом друг с другом?

#header { 
    background-image:url(media/dddd.png); 
    margin-left:auto; 
    margin-right:auto; 
    width:1000px; 
    height:250px; 
    position:relative; 
} 

#sidebar { 
    height:800px; 
    width:300px; 
    background-color:#CCFFFF; 
    float:left; 
    margin-left:23.5%; 
    margin-right:auto; 
    position:static; 
} 

#center { 
    margin-left:auto; 
    margin-right:auto; 
    height:800px; 
    width:700px; 
    background-color:white; 
    float:left; 
    border:1px solid black 
} 

Answer 1

С #sidebar имеет left-margin: 23.5%;, он перемещается влево, когда вы уменьшаете окно, потому что оно всегда будет 23,5% от ширины окна. Так что, если ваше окно шириной 1000 пикселей, #sidebar div margin-left будет 235px, и это число уменьшается с шириной окна (что делает его похожим на то, что div перемещается влево).

#center DIV перемещается вниз, так как ширина окна меньше, чем значение margin-left + ширина #sidebar + ширина #center. Когда окно слишком узкое, divs перестраиваются так, чтобы они соответствовали (например, как текст в текстовом поле переходит к новой строке, когда заканчивается пробел).

Если вы хотите сохранить макет, как это, когда окно становится меньше, есть два простых вещей, которые вы можете сделать:

Сделать все ваши дивы ширина процент: Если ваш #sidebar имеет margin-left:25%; width:20%; и ваш #center div имеет width:50%, оба divs (и поля) будут меняться, когда экран сжимается (это один из способов Responsive Web Design работ). Here is an example on jsFiddle.

Поместите все в контейнер DIV: Поскольку звуки, которые вы хотите иметь свой заголовок, боковую панель и содержимое в одном блоке, можно обернуть все эти элементы в контейнере DIV. Вы должны изменить свой CSS немного, но базовая реализация будет выглядеть примерно так:

CSS

#container { 
    width: 1000px; 
    margin-left:auto; 
    margin-right:auto; 
} 

#header { 
background-color:red; 
width:auto; 
height:250px; 
} 

#sidebar { 
    height:800px; 
    width:300px; 
    background-color:#CCFFFF; 
    float:left; 
} 

#center { 
    height:800px; 
    width:auto; 
    background-color:green; 
    border:1px solid black 
    float:left; 
} 

HTML

<div id=#container"> 
    <div id="#header">header content</div> 
    <div id="#sidebar">sidebar content</div> 
    <div id="#center">center content</div> 
</div> 

Here is a jsFiddle with this code.

Поскольку контейнер div имеет заданную ширину, вам не нужно беспокоиться о t он имеет ширины дочерних элементов.

Answer 2

так я думаю, что вы хотите получить #sidebar и #center рядом друг с другом, по центру и под #header или?

Был бы хорошо, если мы можем видеть ваш HTML-разметку, но

просто дать каждую позицию Div: относительную и поплавок влево.

, то вы указываете #sidebar слева: 50%. Затем добавьте ширину обоих div/2 (#sidebar и #center). -> (sidebar.width + center.width)/2

Затем вы указываете результат #sidebar с левым краем и минусом раньше. -> margin-left: -500px

Answer 3

Я думаю, что проблема заключается в вашем HTML.

Убедитесь, что боковая панель <aside> и ваше содержание <article> вложены в то же <div> или <section>.

Термины, которые я использую, имеют синтаксис HTML5. Если вы не используете HTML5, замените все элементы на <div>.

Пример:

<header></header> 
<div> 
    <section></section> 
    <aside></aside> 
</div> 

Если оба <section> & <aside> имеют width:% or px; & float:left; вы должны быть хорошо.