1. дома
  2. Вопрос и ответ
  3. Сделать Медиа Сетка Использование Css и Html

Сделать Медиа Сетка Использование Css и Html

2015-03-06 3 views
-1

enter image description hereСделать Медиа Сетка Использование Css и Html

Я пытаюсь сделать эту фотографию для веб-страницы и не уверен, как это сделать с html5 и CSS. Любая помощь будет принята с благодарностью.

источник

2015-03-06 Nick Krause

+0

Я haiving трудно понять, как выстроить эти образы вверх в сетка до сих пор я создал сетку, но не могу понять, как делать изображения –

ответ

0 

<style type='text/css'> 
 
    /* Assign this class to your image */ 
 
    #grd { 
 
    width: 400px; 
 
    height: 400px; 
 
    float: left; 
 
    } 
 
    .grdElement { 
 
    width: 50px; 
 
    height: 50px; 
 
    float: left; 
 
    margin: 5px; 
 
    text-align: center; 
 
    border: 1px solid #ccc; 
 
    } 
 
    img{ 
 
    max-height:50px; 
 
    max-width:50px; 
 
    } 
 

 
</style> 
 

 
<div id="grd"> 
 
    <a class="grdElement" href="#">Image</a> 
 
    <a class="grdElement" href="#">Image</a> 
 
    <a class="grdElement" href="#">Image</a> 
 
    <a class="grdElement" href="#">Image</a> 
 
    <a class="grdElement" href="#">Image</a> 
 
    <a class="grdElement" href="#">Image</a> 
 
    <a class="grdElement" href="#">Image</a> 
 
    <a class="grdElement" href="#">Image</a> 
 
    <a class="grdElement" href="#">Image</a> 
 
    <a class="grdElement" href="#">Image</a> 
 
    <a class="grdElement" href="#">Image</a> 
 
    <a class="grdElement" href="#">Image</a> 
 
    <a class="grdElement" href="#">Image</a> 
 
    <a class="grdElement" href="#">Image</a> 
 
    <a class="grdElement" href="#">Image</a> 
 
    <a class="grdElement" href="#">Image</a> 
 
    <a class="grdElement" href="#">Image</a> 
 
    <a class="grdElement" href="#">Image</a> 
 
    <a class="grdElement" href="#">Image</a> 
 
    <a class="grdElement" href="#">Image</a> 
 
    <a class="grdElement" href="#">Image</a> 
 
    <a class="grdElement" href="#">Image</a> 
 
    <a class="grdElement" href="#">Image</a> 
 
    <a class="grdElement" href="#">Image</a> 
 
    <a class="grdElement" href="#">Image</a> 
 
    <a class="grdElement" href="#">Image</a> 
 
    <a class="grdElement" href="#">Image</a> 
 
    <a class="grdElement" href="#">Image</a> 
 
    <a class="grdElement" href="#">Image</a> 
 
    <a class="grdElement" href="#">Image</a> 
 
    <a class="grdElement" href="#">Image</a> 
 
    <a class="grdElement" href="#">Image</a> 
 
    <a class="grdElement" href="#">Image</a> 
 
    <a class="grdElement" href="#">Image</a> 
 
    <a class="grdElement" href="#">Image</a> 
 
    <a class="grdElement" href="#">Image</a> 
 
</div>

Поместите изображение в тегах анкерных. Секрет состоит в том, чтобы плавать все изображения с равными краями и давать изображения максимальной ширины и максимальной высоты

источник

2015-03-06 17:36:35

+0

Спасибо большое, что я сосать в веб-разработке, так что это было намного сложнее для меня, тогда это выглядит –

+0

Мое удовольствие. Если вы использовали мой пример, не забудьте отметить его как ответ или хотя бы плюс1. –

+0

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

0

Это решетка из 12 частей. Это будет 100% ширина, если она меньше 480 пикселей.

<img src="/image1" class="col l1 m4 s8"> 
<img src="/image2" class="col l1 m4 s8"> 


.col{ 
    float: left; 
    position: relative; 
    width: 100%; 
} 

@media only screen and (min-width: 480px) and (max-width: 767px) { 
    .col.s1{ width: 8.33333%; } 
    .col.s2{ width: 16.66667%; } 
    ... 
} 
@media only screen and (min-width: 768px) and (max-width: 1023px) { 
    .col.m1{ width: 8.33333%; } 
    .col.m2{ width: 16.66667%; } 
    ... 
} 
@media only screen and (min-width: 1024px) { 
    .col.l1{ width: 8.33333%; } 
    .col.l2{ width: 16.66667%; } 
    ... 
}

Я использовал его в моем CSS-Framework, скопировать мой код, если вы хотите:
Description
CSS-file

источник

2015-03-06 17:48:13 SebHallin

+0

Мой код реагирует, если у вас есть определенная 'width',' float: left; 'должен делать магию. – SebHallin

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

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