Нужна помощь: три колонки на div

38

indenger20

21 декабря 2015, 17:53

#11



<div class='container'>
   <div class='left'></div>
   <div class='right'></div>
   <div class='center'></div>
</div>
<div class='footer'></div>

.container:after {
  content: '';
  display: table;
  clear:both;

}
.left {
   float: left;
   width: 20%;
}
.right {
   float:right;
   width: 20%;
}
.center {
   margin: 0 auto;
   display: table;
   width: 60%;
}

У меня же работает и ничего не ползет:)

Качественная верстка PSD макетов (/ru/forum/974524)

675

vandamme

21 декабря 2015, 17:55

#12

indenger20:
У меня же работает и ничего не ползет

вам и другим уже сказали - боковые колонки фиксированные.

174

grey109

21 декабря 2015, 17:58

#13

web-developer, да дело не в сайте. Вот минимальный код и на нем уже блоки ползут:

<html>
<head>
<style>
#left {
width: 20%;
float: left;
background-color:blue;
}

#center {
float: none;
margin: 0 auto;
width: 60%;
display:table;
background-color:red;
}

#right{
width: 20%;
float:right;
background-color:green;
}

#footer{
clear:both;
background-color:yellow;
}
</style>
</head>
<body>
<div id="left">Левая колонка Меню Меню Меню Меню</div>
<div id="center">Содержимое страницы Содержимое страницы Содержимое страницы Содержимое страницы </div>
<div id="right">Правая колонка Меню Меню Меню Меню</div>
<div id="footer">Подвал</div>
</body>
</html>

---------- Добавлено 21.12.2015 в 20:59 ----------

indenger20, vandamme, верно подметил и у вас очередность блоков нарушена:

а нужно

Google AdSense улучшил адаптивные Возможности для брендинга в Как получить расширенный сниппет

675

vandamme

21 декабря 2015, 18:08

#14

имхо очевиднейший пример - http://jsfiddle.net/RsRf9/109/

хочешь или нет, переверстать необходимо.

I2

38

indenger20

21 декабря 2015, 18:09

#15

Если с такой разметкой, то


#center {

float: left;

width: 60%;

background-color:red;

}

Вот и все..

Или средством js


$('.right').insertBefore('.footer');

Честно говоря, я уже не понимаю что вам нужно:)

S

171

silicoid

22 декабря 2015, 09:21

#16

универсальный метод, если ширины всех колонок измеряются в %

схема


<div class="col">

    <div>1 колонка</div>

    <div>2 колонка</div>

    <div>3 колонка</div>

</div>

цсс


.col{

    display:block;

    letter-spacing: -0.3em;

}

.col > div{

    display:inline-block;

    letter-spacing:normal;

    text-align:left;

    vertical-align:top;

    width:33.3%;

}

если хотя-бы одна колонка имеет фиксированную ширину, то придется перейти к таблице


.col{

    display:table;

    width:100%;

}



.col > div{

    display:table-cell;

    text-align:left;

    vertical-align:top;

}

Кросбраузерность от Ие7, про нормальные браузеры я и не говорю

и никаких идиотских левых маржинов и флоатов.

Забудьте про них, Учитесь верстать красиво и эффективно

Как правильно выбрать ширину Почему поисковые системы придерживаются Трафиковые SEO-продукты - тренд

675

vandamme

22 декабря 2015, 10:14

#17

silicoid:
Учитесь верстать красиво и эффективно

Это явно не про вас.

S

171

silicoid

22 декабря 2015, 11:05

#18

vandamme, а по делу есть что сказать ? или только сил на наброс хватило?

675

vandamme

22 декабря 2015, 11:19

#19

silicoid, видите же, что ТСу танцы с бубном не помогают. Имхо, ему так надо было показать http://jsfiddle.net/RsRf9/111/

В 2023 году 36,9% всех DDoS-атак пришлось на сферу финансов

Что делать, если ваша email-рассылка попала в спам