Отзывчивый CSS: Организация проблемы с изображениями

Question

Я пытаюсь разместить мои изображения, поэтому, когда мобильное устройство видит их, они делятся на 2 столбца, а когда их видят более крупные устройства, они делятся на 3 столбца. Просто.

Однако есть проблемы. Каждое из моих изображений имеет заголовок, некоторые из них длиннее других, и, как результат (в мобильном режиме), когда изображения перемещаются друг под другом в 2 столбца, изображения могут оставлять пробел, потому что надпись над ним помеха с ним (или что-то).

Так оно и должно выглядеть следующим образом: (где captn означает подпись)

[image] [image] 
[captn] [captn] 

[image] [image] 
[captn] [captn] 

Однако, это выглядит следующим образом:

[image] [image] 
[captn] [captn] 

      [image] 
      [captn] 
[image] 
[captn] 

Поскольку заголовок для первого изображения немного длиннее.

Простым решением является сокращение заголовка первого изображения, но я должен был сохранить детали. Помощь была бы оценена :)

Мой текущий код:

Часть HTML:

<ul id="pictures"> 
     <li> 
     <a href="img/blocks.jpg"> 
      <img src="img/blocks.jpg" alt="" /> 
      <p>THIS IS A LONG, LONG, LONG, LONG, LONG, LONG MESSAGE.......</p> 
     </a> 
     </li> 
     <li> 
     <a href="img/code.jpg"> 
      <img src="img/code.jpg" alt="" /> 
      <p>Beautiful code.</p> 
     </a> 
     </li> 
     <li> 
     <a href="img/skier.jpg"> 
      <img src="img/skier.jpg" alt="" /> 
      <p>Ski jumper.</p> 
     </a> 
     </li> 
     <li> 
     <a href="img/android.jpg"> 
      <img src="img/android.jpg" alt="" /> 
      <p>Android intelligence is powerful.</p> 
     </a> 
     </li> 
     <li> 
     <a href="img/woodland.jpg"> 
      <img src="img/woodland.jpg" alt="" /> 
      <p>An adventurous woodland.</p> 
     </a> 
     </li> 
    </ul> 

Часть CSS:

/*IMAGE STYLING*/ 

#pictures { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
} 

#pictures li { 
    float: left; 
    width: 45%; 
    margin: 2.5%; 
    background-color: black; 
    color: white; 
} 

#pictures li a p { 
    margin: 0; 
    padding: 5%; 
    font-size: 0.75em; 
    color: white; 
} 

Часть отзывчивым CSS:

@media screen and (min-width: 480px) { 

/*TWO COLUMN LAYOUT*/ 

#primary { 
    width: 50%; 
    float: left; 
} 

#secondary { 
    width: 40%; 
    float: right; 
} 



/*Picture page*/ 

#pictures li { 
    width: 28.3333% 
} 

#pictures li:nth-child(4n) { 
    clear: left; 
} 

Спасибо

Answer 1

Обычно вы переворачивать реагирующий от того, что вы делаете, так что вы дизайн для больших экранов и обрабатывать меньшие экраны ответно (макс-ширина: 480px, а не мин -ширина: 480px). Потому что вы сделали это таким образом, я предполагаю, что вы должны по какой-то причине.

Добавьте это к основной части вашего CSS:

#pictures li:nth-child(odd) { 
    clear: left; 
} 

Затем добавьте к этому отзывчивым части:

#pictures li:nth-child(odd) { 
    clear: none; 
} 

Это просто говорит ему, чтобы разделить каждый второй. Без директивы код не совсем уверен, как обрабатывать более длинный текст. Простой, но эффективный.

Answer 2

Я могу понять вашу проблему. Из-за различного размера титров проблема выравнивания может произойти, как вы описали раньше.

, что вы можете сделать, это

1. Wrap изображение и подпись в DIV

2. Дайте некоторые мин высоты к сНу (CSS исправить)

3. Или использовать этот метод (I))

equalheight = function(container) { 
 

 
    var currentTallest = 0, 
 
    currentRowStart = 0, 
 
    rowDivs = new Array(), 
 
    $el, 
 
    topPosition = 0; 
 
    $(container).each(function() { 
 

 
    $el = $(this); 
 
    $($el).height('auto') 
 
    topPostion = $el.position().top; 
 

 
    if (currentRowStart != topPostion) { 
 
     for (currentDiv = 0; currentDiv < rowDivs.length; currentDiv++) { 
 
     rowDivs[currentDiv].height(currentTallest); 
 
     } 
 
     rowDivs.length = 0; // empty the array 
 
     currentRowStart = topPostion; 
 
     currentTallest = $el.height(); 
 
     rowDivs.push($el); 
 
    } else { 
 
     rowDivs.push($el); 
 
     currentTallest = (currentTallest < $el.height()) ? ($el.height()) : (currentTallest); 
 
    } 
 
    for (currentDiv = 0; currentDiv < rowDivs.length; currentDiv++) { 
 
     rowDivs[currentDiv].height(currentTallest); 
 
    } 
 
    }); 
 
} 
 
$(window).resize(function() { //to work in resize 
 
    equalheight('li'); 
 
}); 
 

 
$(document).ready(function() { 
 
    equalheight('li'); 
 
});

/*IMAGE STYLING*/ 
 

 
#pictures { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
} 
 
#pictures li { 
 
    float: left; 
 
    width: 45%; 
 
    margin: 2.5%; 
 
    background-color: black; 
 
    color: white; 
 
} 
 
#pictures li a p { 
 
    margin: 0; 
 
    padding: 5%; 
 
    font-size: 0.75em; 
 
    color: white; 
 
} 
 
@media screen and (min-width: 480px) { 
 
    /*TWO COLUMN LAYOUT*/ 
 
    #primary { 
 
    width: 50%; 
 
    float: left; 
 
    } 
 
    #secondary { 
 
    width: 40%; 
 
    float: right; 
 
    } 
 
    /*Picture page*/ 
 
    #pictures li { 
 
    width: 28.3333% 
 
    } 
 
    #pictures li:nth-child(4n) { 
 
    clear: left; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 

 

 
<ul id="pictures"> 
 
    <li> 
 
    <a href="img/blocks.jpg"> 
 
     <img src="http://www.w3schools.com/tags/img_pulpit.jpg" alt="" /> 
 
     <p>THIS IS A LONG, LONG, LONG, LONG, LONG, LONG MESSAGE.......</p> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="img/code.jpg"> 
 
     <img src="http://www.w3schools.com/tags/img_pulpit.jpg" alt="" /> 
 
     <p>Beautiful code.</p> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="img/skier.jpg"> 
 
     <img src="http://www.w3schools.com/tags/img_pulpit.jpg" alt="" /> 
 
     <p>Ski jumper.</p> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="img/android.jpg"> 
 
     <img src="http://www.w3schools.com/tags/img_pulpit.jpg" alt="" /> 
 
     <p>Android intelligence is powerful.</p> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="img/woodland.jpg"> 
 
     <img src="http://www.w3schools.com/tags/img_pulpit.jpg" alt="" /> 
 
     <p>An adventurous woodland.</p> 
 
    </a> 
 
    </li> 
 
</ul>

Отключить JS и попытаться выполнить код, проблема выравнивания будет.

Answer 3

Попробуйте это: Equal Height of Columns

Answer 4

Я думаю, что если вы будете использовать три столбца и вместо плавающей элемент списка плавать весь список ул с одинаковой шириной (33,33%), то эта процедура может помочь тебе.

И если вам нужно две колонки в мобильном режиме, то просто изменить ширину уль «s к 50%, так что теперь третий столбец является проблемой, для этого вы можете использовать 100% ширину для этого столбца, или с помощью какого-либо метода JavaScript вы можете разделить элементы третьего столбца на два других столбца. Я не помню эту технику на данный момент, но вы можете использовать ее в Google, потому что я основал эту технику в Google.

Проверьте приведенный ниже пример.

/*You don't have to use these JQuery, it is for demo purpose only, it creates different color for each 'li' */ 
 

 

 
$(document).ready(function() { 
 
    var randomColors = ["black","yellow","red","blue","orange","pink","red","blue","black"]; 
 
    $(".item").each(function(index) { 
 
     var len = randomColors.length; 
 
     var randomNum = Math.floor(Math.random()*len); 
 
     $(this).css("backgroundColor",randomColors[randomNum]); 
 
     //Removes color from array so it can't be used again 
 
     randomColors.splice(randomNum, 1); 
 
    }); 
 
});

.col { 
 
    float: left; 
 
    width: 33.33%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.item { 
 
    padding: 5px; 
 
    color: #fff; 
 
    list-style-type: none; 
 
} 
 

 
.item span { 
 
    background: orange; 
 
    text-align: center; 
 
    font-weight: bold; 
 
    display: block; 
 
    width: 100%; 
 
    padding: 5px 0; 
 
} 
 

 
.item img { 
 
    width: 100%; 
 
} 
 

 

 
@media (max-width: 768px;){ 
 
    .col { 
 
     width: 50%; 
 
    } 
 
    
 
    .third-col { 
 
     float: none; 
 
     width: 100%; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
 

 
<ul class="col"> 
 
    <li class="item-1 item"> 
 
     <span>Caption 1</span> 
 
     <img src="http://lorempixel.com/200/250/food/Dummy-Text/"> 
 
    </li> 
 
    <li class="item-2 item"> 
 
     <span>Caption 2</span> 
 
     <img src="http://lorempixel.com/200/200/people/Dummy-Text/"> 
 
    </li> 
 
    <li class="item-3 item"> 
 
     <span>Caption 3</span> 
 
     <img src="http://lorempixel.com/200/100/sports/Dummy-Text/"> 
 
    </li> 
 
</ul> 
 
<ul class="col"> 
 
    <li class="item-4 item"> 
 
     <span>Caption 4</span> 
 
     <img src="http://lorempixel.com/200/120/sports/Dummy-Text/"> 
 
    </li> 
 
    <li class="item-5 item"> 
 
     <span>Caption 5</span> 
 
     <img src="http://lorempixel.com/200/280/sports/Dummy-Text/"> 
 
    </li> 
 
    <li class="item-6 item"> 
 
     <span>Caption 6</span> 
 
     <img src="http://lorempixel.com/200/150/sports/Dummy-Text/"> 
 
    </li> 
 
</ul> 
 
<ul class="col third-col"> 
 
    <li class="item-7 item"> 
 
     <span>Caption 7</span> 
 
     <img src="http://lorempixel.com/200/190/sports/Dummy-Text/"> 
 
    </li> 
 
    <li class="item-8 item"> 
 
     <span>Caption 8</span> 
 
     <img src="http://lorempixel.com/200/150/sports/Dummy-Text/"> 
 
    </li> 
 
    <li class="item-9 item"> 
 
     <span>Caption 9</span> 
 
     <img src="http://lorempixel.com/200/210/sports/Dummy-Text/"> 
 
    </li>  
 
</ul>