CSS только асимметричная сетка для жидкости

Привет, сообщество, как дела?CSS только асимметричная сетка для жидкости

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

мне было интересно, если кто может помочь мне с этой асимметричной сетки жидкости у меня есть, но я не могу использовать Javascript или изменить HTML, он должен быть CSS только

enter image description here

HTML-код заключается в следующем:

<ul> 
    <li class="image"></li> 
    <li class="image"></li> 
    <li class="image"></li> 
    <li class="image"></li> 
    <li class="image"></li> 
    <li class="image"></li> 
    <li class="image"></li> 
    <li class="image"></li> 
    <li class="image"></li> 
    <li class="image"></li> 
    <li class="image"></li> 
    <li class="image"></li> 
    <li class="image"></li> 
    <li class="image"></li> 
</ul>

И CSS-то вроде этого:

ul { 
width:1200px; 
padding:10px; 
} 
li.image { 
float: left; 
margin: 10px; 
overflow: hidden; 
width:220px; 
height:220px; 
}

Благодарим вас за помощь всем, кто может мне помочь.

источник

2014-10-12 CaptainBlue

«Жидкость» означает - размеры изображений не являются статическими (220x220 пикселей)? Должна ли сетка реагировать? Если нет, я получил решение ... – sinisake

Да, вы правы, моя ошибка. Мне нужно быть отзывчивым, но я буду делать запросы с шириной медиа, потому что больший элемент является другим, поскольку устройство/разрешение меньше. Я имею в виду, что последние 2 блока первой строки, например, не отображаются с меньшим разрешением (это означает, что более крупные элементы не совпадают). Спасибо, что нашли время ответить мне! Я заинтересован в вашем решении, даже если он не реагирует. – CaptainBlue

Если вы будете использовать медиа-запросы, это может помочь, надеюсь:

HTML:

<ul> 
    <li class="image"></li> 
    <li class="image"></li> 
    <li class="image2"></li> 
    <li class="image"></li> 
    <li class="image"></li> 
    <li class="image fix1" ></li> 
    <li class="image2"></li> 
    <li class="image"></li> 
    <li class="image"></li> 
    <li class="image"></li> 
    <li class="image"></li> 
    <li class="image"></li> 
    <li class="image"></li> 
    <li class="image fix2"></li> 

</ul>

CSS:

ul { 
width:1200px; 
padding:10px; 
} 
li.image { 
float: left; 
margin: 10px; 
overflow: hidden; 
width:220px; 
height:220px; 
background-color:black; 
} 
li.image2 { 
float: left; 
margin: 10px; 
overflow: hidden; 
width:460px; 
height:460px; 
background-color:black; 
} 
li.fix1 { 
    margin-top:-230px; 
} 
li.fix2 { 
    margin-top:-710px; 
    margin-left:250px; 
}

Демо: http://fiddle.jshell.net/upwxrga3/show/

EDIT: Обновлено CSS, потому что HTML не может быть изменен:

ul { 
width:1200px; 
padding:10px; 
} 
li.image { 
float: left; 
margin: 10px; 
overflow: hidden; 
width:220px; 
height:220px; 
background-color:black; 
} 


ul li:nth-child(3), ul li:nth-child(7) { 
    float: left; 
margin: 10px; 
overflow: hidden; 
width:460px; 
height:460px; 
background-color:black; 
} 

ul li:nth-child(6) { 
    margin-top:-230px; 
} 
ul li:nth-child(14) { 
    margin-top:-710px; 
    margin-left:250px; 
}

источник

2014-10-12 09:10:09 sinisake

Спасибо Nevermind, я забыл упомянуть, что я не могу изменить html, потому что код генерируется автоматически через файл javascript, который находится на сервере. Это похоже на виджет галереи, но я могу только стилизовать результат, я не могу ничего изменить. Может быть, я могу использовать nth-child ... что вы думаете? – CaptainBlue

Спасибо Nevermind !!! работает в скрипке. я проведу i мой локальный файл, и я снова ответу. Есть ли какая-либо благодарственная кнопка, чтобы поблагодарить вас или способ добавить к вам репутацию? Я не знаю этого о stackoverflow ... Я прочитаю справку. – CaptainBlue

Работает как шарм !! Спасибо, что нашли время, чтобы ответить мне. Я расскажу о том, как поблагодарить вас за репутацию или голос. – CaptainBlue

Я пытался на это и, возможно, работать для вас, и я сделал это, как показано ниже:

это CSS:

*{box-sizing: border-box;} 
 

 
html{height: 100%;} 
 

 
body{margin: 0;} 
 

 
.container{ 
 
    margin: 0 auto; 
 
    width: 970px; 
 
} 
 

 
.row{ 
 
    width: 100%; 
 
    margin-right: -15px; 
 
    margin-bottom: 20px; 
 
    margin-left: -15px; 
 
} 
 

 
.container > .row:first-child{ 
 
    margin-bottom: 0; 
 
} 
 

 
.row:before, .row:after{ 
 
    content: " "; 
 
    display: table; 
 
} 
 
.row:after{clear: both;} 
 

 
[class*=column-]{ 
 
    float: left; 
 
    min-height: 150px; 
 
    padding: 15px; 
 
    position: relative; 
 
} 
 

 
[class*=column-] [class*=column-]{ 
 
    background-color: lightgrey; 
 
    background-clip: content-box; 
 
    padding: 0; 
 
    width: 100%; 
 
} 
 

 
[class*=column-] .row{ 
 
    margin: 0 0 20px; 
 
} 
 

 
[class*=column-] .row:last-child{ 
 
    margin: 0; 
 
} 
 

 
.column-1{width: 20%;} 
 
.column-2{ 
 
    background-color: lightgrey; 
 
    background-clip: content-box; 
 
    height: 350px; 
 
    width: 40%; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
\t <meta charset="utf-8"> 
 
\t <title>Asymmetrical Fluid Gride</title> 
 
</head> 
 
<body> 
 
\t <div class="container"> 
 
\t \t <div class="row"> 
 
\t \t \t <div class="column-1"> 
 
\t \t \t \t <div class="row"> 
 
\t \t \t \t \t <div class="column-1"></div> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="row"> 
 
\t \t \t \t \t <div class="column-1"></div> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t \t <div class="column-1"> 
 
\t \t \t \t <div class="row"> 
 
\t \t \t \t \t <div class="column-1"></div> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="row"> 
 
\t \t \t \t \t <div class="column-1"></div> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t \t <div class="column-2"></div> 
 
\t \t \t <div class="column-1"> 
 
\t \t \t \t <div class="row"> 
 
\t \t \t \t \t <div class="column-1"></div> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="row"> 
 
\t \t \t \t \t <div class="column-1"></div> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t \t <div class="row"> 
 
\t \t \t <div class="column-2"></div> 
 
\t \t \t <div class="column-1"> 
 
\t \t \t \t <div class="row"> 
 
\t \t \t \t \t <div class="column-1"></div> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="row"> 
 
\t \t \t \t \t <div class="column-1"></div> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t \t <div class="column-1"> 
 
\t \t \t \t <div class="row"> 
 
\t \t \t \t \t <div class="column-1"></div> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="row"> 
 
\t \t \t \t \t <div class="column-1"></div> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t \t <div class="column-1"> 
 
\t \t \t \t <div class="row"> 
 
\t \t \t \t \t <div class="column-1"></div> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="row"> 
 
\t \t \t \t \t <div class="column-1"></div> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
</body> 
 
</html>

вы можете запустить его здесь, нажав «Выполнить код фрагмента» надеемся решить вашу проблему ...

источник

2014-10-12 09:49:34 MNR

Спасибо Мухаммаду за ваш ответ! К сожалению, я не могу редактировать или изменять код HTML, только css. Но еще раз спасибо. – CaptainBlue

Хорошо, ничего страшного, но в вашем вопросе вы не сказали, что я не могу использовать JavaScript, что означает, что CSS и HTML хороши. – MNR

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

CSS только асимметричная сетка для жидкости

ответ

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