Совершенствование изображений в макете макета

Question

Итак, я разрабатываю онлайн-портфолио, и я работаю над макетом. Все, за исключением того, что у меня немного пробел внизу изображения;

https://jsfiddle.net/dzd3q58q/14/embedded/result/

.masonry .item, 
.masonry .grid-sizer 

кто может помочь в установлении этого вопроса?

Answer 1

Сначала вы устанавливаете высоту этих div, используя h2, h3, а также ваш .item, поэтому, конечно, они показывают красный цвет, поскольку высота больше изображения. Обычно вы задаете ширину, а не высоту. Вам также необходимо загрузить кладку с использованием изображений, чтобы ваш макет не был пушистым, так как кладка настраивает элементы перед загрузкой всех изображений.

Вот jsfiddle с исправленными CSS, удалив высоты и установив сетку-разделитель отдельно от вашего элемента.

Вы можете играть с ним. Кроме того, FYI, поместите ваши js в внешние ресурсы jsFiddle, а не в js-панель. Помогает, когда вы можете добавлять код, требующий отладки.

CSS

*{ 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
     box-sizing: border-box; 
    } 

img{ 
display:block; 
height:auto; 
max-width:100%;  
} 


body { font-family: sans-serif; } 

.masonry { 
background: #EEE; 
    max-width: 1800px; 
margin:120px auto;  
} 

.grid-sizer { 
width: width:100%; 
} 
.masonry .item { 
width: 100%; 
float: left; 
background: #D26; 
border: 2px solid #333; 
border-color: hsla(0, 0%, 0%, 0.5); 
border-radius:; 
margin-bottom: 20px; 
} 



@media screen and (min-width: 400px) { 
.masonry .item, 
.masonry .grid-sizer { width: calc((100% - 20px)/2); } 
} 

@media screen and (min-width: 900px) { 
.masonry .item, 
.masonry .grid-sizer { width: calc((100% - 40px)/3); } 
.masonry .item.w2 { width: calc((100% - 20px)/2); } 
.masonry .item.w3 { width: calc((100% - 40px) * (2/3) + 20px); } 
.masonry .item.w4 { width: 100%; } 
    } 

JS

var $container = $('#container'); 
/initialize Masonry after all images have loaded 
$container.imagesLoaded(function() { 
$container.masonry(); 
});