Я боролся с этим уже более 4 часов, и я не могу понять это. Обычно, когда я проектирую сайт, у меня всегда есть его центр, поэтому я никогда не сталкиваюсь с проблемами, из-за которых divs выходят из макета.
ВОПРОС 1
У меня есть боковая панель слева, а затем блок контента, а затем боковая панель справа. Каждая боковая панель должна быть шириной 180 пикселей, а блок содержимого должен заполнять пустое пространство между этими двумя боковыми панелями.
Я даже не могу заставить их плавать рядом с афорией сейчас, я мог бы сделать это раньше, но я действительно схожу с ума.
Даже если я заставляю их плавать рядом с eachother, когда я увеличиваю страницу на странице, блок контента разрывает макет и падает ниже левой боковой панели, так что это очень раздражает. Я никогда не сталкивался с этой проблемой раньше.
ВОПРОС 2
Блок div в заголовке должен автоматически располагаться между двумя логотипами, подобно тому, что мне нужно для content_wrapper, как я могу это сделать?
Может кто-то мне помочь, пожалуйста?
благодаря
HTML
<div id="header">
<div id="left_logo" class="logo"></div> <!-- Logo on the Left -->
<div id="block">This is a block</div> <!-- Div block inbetween the two logos -->
<div id="right_logo" class="logo"></div> <!-- Logo on the Right -->
</div>
<div id="content_wrapper">
<div id="left_sidebar" class="sidebar">Left Sidebar</div>
<div id="middle_content">Middle Content</div>
<div id="right_sidebar" class="sidebar">Right Sidebar</div>
</div>
CSS
html,body {
height:100%;
}
body {
background-image: url('../bg.jpg');
}
#header {
width: 100%;
border: solid 1px;
overflow: hidden;
}
.logo {
width: 180px;
height: 180px;
background-image: url('../avatar.jpg');
border: solid 1px;
}
#block {
border: solid 1px;
float: left;
}
#left_logo {
float: left;
}
#right_logo {
float: right;
}
#content_wrapper {
width: 100%;
}
.sidebar {
width: 180px;
float: left;
}
#middle_content {
min-height: 500px;
width: 100%;
float: left;
}
Следует отметить несколько моментов
#right_sidebar
перед #middle_content
#right_sidebar
должен плавать прямо не слева#middle_content
не должен плавать и не иметь width: 100%
#middle_content
в своем собственном столбце, то есть не плавать под левой и правой боковой панелью, добавить margin-left
и margin-right
То же самое относится к #header
.
См. JSFiddle, как это может выглядеть.
Хотя ему несколько лет, есть хороший обзор основных схем компоновки с CSS на http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html