Здравствуйте, я знаю, что есть много вопросов о динамической ширине содержимого. Но этот конкретный вопрос я не мог найти для этого хорошего ответа.
У меня есть следующая настройка для моего сайта (некоторые страницы)
+--------------+---------------------------------+
| | |
| Sidebar | Content |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
+--------------+---------------------------------+
Общая ширина - 980 пикселей
Но на некоторых из этих страниц я не использую боковую панель, так что слева остается пустое пространство. Как я могу решить это, разрешив потоку страницы содержимого слева, когда нет боковой панели?
+--------------+---------------------------------+
| |
| Content |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
+--------------+---------------------------------+
У меня есть следующая структура html
Я дал обоим сторонам и содержимым divs фиксированную ширину, а в сторону - поплавок влево, а контент - поплавка вправо.
Есть ли хороший простой способ достичь этого?
Вот сценарий, который показывает два случая: один с боковой панелью и один без него.
Следует помнить, что свойство display: block
делает элемент доступным со всей доступной шириной, несмотря на содержимое. И то, что делает .content
- float: left
делает его .content
рядом с боковой панелью, если он присутствует, и заполняет все доступное пространство.
<div class="parent">
<div class="sidebar">Sidebar</div>
<div class="content">Content</div>
</div>
<br>
<div class="parent">
<div class="content">Content</div>
</div>
.parent {
border: 1px solid;
margin: 0px auto;
height: 100px;
width: 300px;
}
.sidebar {
height: 100%;
width: 100px;
float: left;
background: rgb(255, 176, 176); /* Light Red */
}
.content {
height: 100%;
background: rgb(148, 148, 255); /* Light Blue */
}
HTML
<div id="main">
<div id="sidebar"></div>
<div id="content"></div>
</div>
CSS
#main{
width: 980px;
margin: 0 auto;
}
#main:after{
content: '';
display: block;
clear: both;
}
#sidebar{
float: left;
width: 200px;
}
#content{overflow: hidden;}