создать динамическую растущую ширину для контента

Question

создать динамическую растущую ширину для контента

0

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

У меня есть следующая настройка для моего сайта (некоторые страницы)

         +--------------+---------------------------------+
     |              |                                 |
     |  Sidebar     |       Content                   |
     |              |                                 |
     |              |                                 |
     |              |                                 |
     |              |                                 |
     |              |                                 |
     |              |                                 |
     |              |                                 |
     |              |                                 |
     |              |                                 |
     |              |                                 |
     |              |                                 |
     |              |                                 |
     |              |                                 |
     |              |                                 |
     |              |                                 |
     |              |                                 |
     +--------------+---------------------------------+

Общая ширина - 980 пикселей

Но на некоторых из этих страниц я не использую боковую панель, так что слева остается пустое пространство. Как я могу решить это, разрешив потоку страницы содержимого слева, когда нет боковой панели?

     +--------------+---------------------------------+
     |                                                |
     |                      Content                   |
     |                                                |
     |                                                |
     |                                                |
     |                                                |
     |                                                |
     |                                                |
     |                                                |
     |                                                |
     |                                                |
     |                                                |
     |                                                |
     |                                                |
     |                                                |
     |                                                |
     |                                                |
     |                                                |
     +--------------+---------------------------------+

У меня есть следующая структура html

Я дал обоим сторонам и содержимым divs фиксированную ширину, а в сторону - поплавок влево, а контент - поплавка вправо.

Есть ли хороший простой способ достичь этого?

Reshad 23 сен. 2013, в 12:30

Источник

Теги:

html

css

html5

2 ответа

Ещё вопросы

Tomalla · Answer 1 · 2013-09-23T08-31-00.000Z

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

Следует помнить, что свойство display: block делает элемент доступным со всей доступной шириной, несмотря на содержимое. И то, что делает .content - float: left делает его .content рядом с боковой панелью, если он присутствует, и заполняет все доступное пространство.

HTML

<div class="parent">
    <div class="sidebar">Sidebar</div>
    <div class="content">Content</div>
</div>

<br>

<div class="parent">
    <div class="content">Content</div>
</div>

CSS

.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 */

}

к сожалению, это не работает как-то .. Если я создаю структуру только тестовую настройку, это работает, но при реализации на моем сайте это не работает.
Все можно исправить, этот макет довольно прост и не сложен. Попробуйте дать нам пример неработающего макета, и мы постараемся это исправить.
Вот URL, который я сделал для тебя: песочница tiny.cc/sandboxed
Но сайт вообще не реализует мою идею. И почему вы называете это "песочницей"?
извините, что это была старая версия, я выдвинул новую версию сейчас. имеет значение имя для кода?

Anon · Answer 2 · 2013-09-23T07-46-00.000Z

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;}

не работает .. содержимое идет влево и боковая панель находится под ним