Отзывчивая компоновка с фиксированной шириной и высотой по горизонтали DIVs

Я пытаюсь добиться следующего результата. Я хотел бы построить отзывчивый макет, где я могу отображать на строке несколько DIV (вид ящиков или фрагментов) фиксированной ширины и высоты, которые выпадают в строке ниже при изменении размера браузера. Группа «плитки» всегда должна быть сосредоточена в окне браузера, но одиночные плитки должны быть выровнены влево, если их сбросить в строке ниже. Макет должен быть совместим с IE6 и выше.Отзывчивая компоновка с фиксированной шириной и высотой по горизонтали DIVs

Моя главная проблема с IE 6 и 7 (не знаю 8), потому что DIV (.container), который содержит группу плитки устанавливается как display: table, которые я знаю, не поддерживается IE6 +. Я знаю, что есть обходной путь с файлом .HTC, но я уверен, что есть лучшее решение. Я не беспокоюсь о том, чтобы использовать JQuery, если необходимо, или чистый CSS.

Responsive layout

С media queries я установил .container ширину в зависимости от размера браузера

@media (min-width: 1110px) { 
    .container{ 
     width: 1100px; 
    } 
}

Это работает, но не в IE

.container { 
    display:table; 
    margin-left:auto; 
    margin-right:auto; 
} 

.box { 
    float: left; 
    background: #CECECE; 
    height: 200px; 
    width: 150px; 
    margin: 5px; 
}

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

источник

2013-05-09 Nicero

«IE6 и выше», - вы должны быть шутишь , IE 6 используется на 0,2% в США и 0,5% в Европе. Zero Point Два процента! :) Idk. Я бы не стал беспокоиться об этом. – Miro

Связанный: http://stackoverflow.com/questions/5327903/ie6-css-displaytable-fix - но, как сказал miro, я определенно забуду поддержку IE6 и IE7 и только беспокоюсь об IE8 (до тех пор, пока XP вокруг). – m90

Это не совсем то, что вы просили, но это близко, и делает работу в IE6 (и вид выглядит лучше, ИМХО):

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 

<style media="all"> 

.wrap {width: 80%; margin: 0 auto; overflow: hidden;} 

.col1 {width: 49.5%; float: left;} 

.col2 {width: 49.5%; float: right;} 

.col1 div, .col2 div {width: 150px; height: 200px; background: #ccc;} 

.col1 div {float: right; margin: 0 0 2% 2%;} 

.col2 div {float: left; margin: 0 2% 2% 0;} 

</style> 

</head> 
<body> 

<div class="wrap"> 
    <div class="col1"> 
     <div></div> 
     <div></div> 
     <div></div> 
    </div> 
    <div class="col2"> 
     <div></div> 
     <div></div> 
     <div></div> 
    </div> 
</div> 

</body> 
</html>

источник

2013-05-09 09:45:37

Очень красивая и элегантная. Спасибо! – Nicero

Рад, что вам понравилось. :-) Я недостаточно хорош, чтобы сделать следующий шаг и сделать то, что вы просили в IE6, хотя я готов поспорить, что это выполнимо. Как и многие другие, я полностью избегал IE6 и 7. –

Отзывчивая компоновка с фиксированной шириной и высотой по горизонтали DIVs

ответ

Смежные вопросы