Блог

Главная - Вопросы по программированию - Справка по верстке CSS / HTML

Справка по верстке CSS / HTML

#html #css

#HTML #css

Вопрос:

Я использую этот код…

 <div id="app">
    <div id="app-actionbar">
        topbar
    </div>
    <div id="app-userinfo">
        sidebar
    </div>
    <div id="app-content">
        content
    </div>
</div>

/** Styling **/

#app {
    border:1px solid #666;
}

#app-actionbar {
    color: #333;
    width: 900px;
    float: left;
    height: 45px;
    background: #D9D9DC;
    margin-top:10px;
}

#app-content { 
    float: left;
    color: #333;
    background: #FFFFFF;
    height: 350px;
    width: 725px;
    display: inline;
}

#app-userinfo { 
    color: #333;
    background:#F2F2F2;
    height: 350px;
    width: 175px;
    float: left;
}

Однако это работает не так, как я хочу.

Я хочу добавить рамку вокруг него, но это не работает (и это перемещает содержимое вниз).

введите описание изображения здесь

Комментарии:

1. К какой части вы хотите добавить границу?

2. Вам придется быть немного более понятным или предоставить изображение того, как вы хотите, чтобы это выглядело на самом деле, чтобы сообщество SO не догадалось, чего вы на самом деле хотите достичь.

3. Я могу сказать, чего он хочет… Это не тайна. jsfiddle.net/P9AQp

4. @Jared, arrr, этот макет в значительной степени похож на его снимок экрана (о том, в чем проблема)

5. @Dan — Да, я знаю; это его точная размещенная разметка / css. Мне не составило труда увидеть проблему, когда я посмотрел на нее. 😉

Ответ №1:

Вам нужно очистить плавающие элементы в вашем #app . Попробуйте добавить overflow:hidden; или overflow:auto; в #app . Это позволит получить границу, которая обернет весь ваш DIV.

Вот живая ссылка на jsfiddle ваших приведенных выше фрагментов с overflow:hidden присвоенным: http://jsfiddle.net/AhZAU

Интервал вверху «(и его перемещение содержимого вниз)» создается margin-top:10px на #app-actionbar . Удалите поля, и пробел больше не будет присутствовать: http://jsfiddle.net/AhZAU/1

Комментарии:

1. Этот вопрос состоит из двух частей: "I want to add a border around it, but its not working (and its moving the content down)."

2. Граница не работает, потому что плавающие элементы не очищены. И это смещается вниз, потому что у него есть margin-top: 10px, назначенный для DIV #app-actionbar.

3. @thirtydot, я интерпретировал вопрос как «Я хочу, чтобы граница проходила полностью, но это не работает и вместо этого создает пространство для полей вверху». Что, я думаю, понятно, как только я прочитаю это несколько раз = P Приветствия.

4. Я тоже не уверен, но его текстовое «содержимое» определенно выглядит для меня не в том месте, вот почему я думаю, что это так. Давайте подождем отзывов от OP.

5. @Dan — Я почти уверен, что @thirtydot прав. Я видел это там, но это не зарегистрировалось у меня, я просто подумал, что это странно. С другой стороны, я думаю, что @thirtydot прав.

Ответ №2:

Способ создания причудливого режима©:

 #app {
    border:1px solid #666;
    overflow: auto;
    width: 100%;
}

http://jsfiddle.net/CePt6/

Из статьи:

Если вы хотите добавить, скажем, границу вокруг всех элементов с плавающей точкой (т.Е. граница вокруг контейнера)…

ПРИМЕЧАНИЕ

Что касается разрыва вверху, вы можете устранить его, удалив margin-top: 10px; из #app-actionbar .

 #app-actionbar {
    color: #333;
    width: 900px;
    float: left;
    height: 45px;
    background: #D9D9DC;
}

http://jsfiddle.net/CePt6/2/

Редактировать

Теперь, если вы имеете в виду, что блок содержимого перемещается вниз, сделайте его ширину #app такой же, как у вашего #app-actionbar :

 #app {
    border:1px solid #666;
    overflow: auto;
    width: 900px;
}

http://jsfiddle.net/CePt6/3/

Комментарии:

1. Этот вопрос состоит из двух частей: "I want to add a border around it, but its not working (and its moving the content down)."

2. @thirtydot — Да, я только что вспомнил вторую часть. Смотрите мою последнюю правку. 😉

3. Я думаю, он имеет в виду, что ему нужно content справа от боковой панели, а не под ней.

4. @thirtydot — Молодец! Хорошо, это тоже добавлено.

Ответ №3:

Просто для смеха, попробовал это, но с некоторыми изменениями макета. Проверьте, помогает ли это. (демо здесь)

 <div id="app">
    <div id="app-actionbar">
        topbar
    </div>
    <div id="app-userinfo">
        sidebar
    </div>
    <div id="app-content">
        content
    </div>
</div>

CSS:

 #app {
    border:1px solid #666;
    clear:both;
    position:absolute;
}

#app-actionbar {
    color: #333;
    width: 900px;
    float: left;
    height: 45px;
    background: #D9D9DC;
    margin-top:0px; 
}

#app-content { 
    float: left;
    color: #333;
    background: red;
    height: 350px;
    width: 725px;
    display: inline; 

    left:200px;
    top:75px;
}

#app-userinfo { 
    color: #333;
    background:#F2F2F2;
    height: 350px;
    width: 175px;
    float: left;
    top:65px;

}

Ответ №4:

это должно сработать. jsfiddle.сетевая демонстрация

 #app {
border:1px solid #666;
height: auto;
overflow: auto;
width: 900px;
}

#app-actionbar {
color: #333;
width: 900px;
float: left;
height: 45px;
background: #D9D9DC;
}

#app-content { 
float: left;
color: #333;
background: #FFFFFF;
height: 350px;
width: 725px;
display: inline;
}

#app-userinfo { 
color: #333;
background:#F2F2F2;
height: 350px;
width: 175px;
float: left;
clear: left;
}

Комментарии:

1. Вам следует рассмотреть возможность добавления к вашему ответу jsFiddle demo вашего кода. На данный момент у меня нет способа увидеть, как отображается код, не затрачивая усилий, поэтому я вряд ли поддержу ваш ответ.

Ответ №5:

Вот что вы можете сделать:

Добавьте следующие строки в свой #app div следующим образом:

 width:900px;
min-height: 300px;
overflow:auto;

Вышесказанное предназначено для автоматического расширения внешнего div по мере увеличения длины внутреннего содержимого.

Однако это будет ограничением для более старых версий IE, поскольку у них не было свойства min-height.