CSS для отображения содержимого трех столбцов

0

Я пытаюсь получить три вывода столбца, используя <div> для каждого.

Прямо сейчас мой div слева выровнен правильно даже средний, но когда я пытаюсь правильно установить, он просто сжимается.

CSS

/* left div */
 #left-sidebar, #right-sidebar {
    width:15%;
    height:700px;
    float: left;
    padding-left: 15px;
    padding-top: 20px;
}

/* middle div */
 #mid-content {
    width:75%;
    padding-left: 30px;
    padding-top: 20px;
}

/* right div */
 #right-sidebar {
    float:right;
}
  • 0
    ваш правый див должен быть всего 10% или меньше, укажите это в вашем CSS
Теги:
css-float
layout

3 ответа

1

Прежде всего, ваши элементы составляют до 105%. Во-вторых, вы добавили дополнение к плавающему элементу с шириной, указанной в%, а не хорошей идеей. Посмотрите http://www.w3schools.com/css/css_boxmodel.asp

Вот решение: http://jsfiddle.net/Ru6CL/

#left-sidebar,
#right-sidebar,
#mid-content {
    float:left;
}

#left-sidebar,
#right-sidebar {
    width: 15%;
    background-color: red;
}
#mid-content {
    width: 70%;
    background-color: blue;
}

не забудьте использовать clear: both;

Поделиться
  • 0
    @KyleMit Я сделал изменения, но правая боковая панель все еще не работает. Также, пожалуйста, скажите, где и как использовать clear: оба
  • 0
    @KyleMit я должен использовать таблицу, чтобы разместить все div в каждом соответствующем столбце ???? моя левая боковая панель содержит панель навигации, например, когда мы наводим на нее курсор, суб-навигация перемещается влево, а затем в середину контента, а затем снова в правую боковую панель ...
Показать ещё 1 комментарий
0

Что произойдет, если вы измените значения, чтобы добавить до 100%?. Сейчас 75%, 15% и 15% составляют до 105%.

Поделиться
  • 0
    может быть 105 ??))))
  • 0
    @AndrewEvt лол, еще один просчет в том же посте :) спасибо за подсказку. Я отредактировал ответ.
Показать ещё 1 комментарий
0

Это происходит потому, что, согласно модели boxs CSSs, размер элемента является суммой его ширины, границы и заполнения, поэтому ваш контент + дополнение превышает 100%.

чтобы решить эту проблему, просто добавьте

box-sizing: border-box;

к вашим колонкам, и он пересчитает необходимую ширину вместе с рассмотренным выше.

Кроме того, вы можете подумать о том, чтобы плавать элементы в одном направлении, то есть слева, так как в противном случае может быть сброшено значение размера коробки.

Я сделал здесь рабочий пример: http://jsfiddle.net/v6peK/

Поделиться
  • 0
    Я бы не советовал использовать box-sizing, я знаю, что он поддерживается во всех основных браузерах, но это плохая практика.
  • 0
    пытался, но до сих пор не работает эффективно
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню