Проблема с сеткой решетки

Я развиваю веб-сайт через Фонд. Но моя сетка не работает должным образом. Всякий раз, когда я изменяю размер браузера до 1596px, 1440px и 1333px; сетка не работает должным образом. Я положил свой исходный кодПроблема с сеткой решетки

Codepen:

Codepen

Я получил скриншот видео моего scren.

Youtube

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <meta name="google" value="notranslate"> 
 

 

 
    <title>Foundation</title> 
 

 

 
    <link rel="stylesheet" href="//codepen.io/assets/reset/normalize.css"> 
 

 
    <link rel='stylesheet prefetch' href='https://cdn.jsdelivr.net/foundation/5.5.0/css/foundation.css'> 
 

 

 

 
</head> 
 

 
<body> 
 

 
    <div class="row"> 
 
    <div class="large-3 medium-4 small-6 columns"> 
 
     <a href="http://127.0.0.1/makine/canon-powershot-elph-310-hs/" title="Canon PowerShot Elph 310 HS"> 
 
     <img width="199" height="147" src="http://i.imgur.com/fwHd8zf.png" class="attachment-kucuk wp-post-image" alt="Canon_PowerShot_Elph_310_HS_428369_i0" /> 
 
     <h4>Canon PowerShot Elph 310 HS</h4> 
 
     </a> 
 
    </div> 
 

 
    <div class="large-3 medium-4 small-6 columns"> 
 
     <a href="http://127.0.0.1/makine/canon-powershot-s120/" title="Canon PowerShot S120"> 
 
     <img width="280" height="250" src="http://i.imgur.com/HLuFBv0.png" class="attachment-kucuk wp-post-image" alt="Canon_PowerShot_S120_890378" /> 
 
     <h4>Canon PowerShot S120</h4> 
 
     </a> 
 
    </div> 
 

 
    <div class="large-3 medium-4 small-6 columns"> 
 
     <a href="http://127.0.0.1/makine/canon-1d-x/" title="Canon 1D X"> 
 
     <img width="275" height="250" src="http://i.imgur.com/BlX05lN.png" class="attachment-kucuk wp-post-image" alt="Canon_EOS_1D_X_466261_i0" /> 
 
     <h4>Canon 1D X</h4> 
 
     </a> 
 
    </div> 
 

 
    <div class="large-3 medium-4 small-6 columns"> 
 
     <a href="http://127.0.0.1/makine/canon-7d-mark2/" title="Canon 7D Mark2"> 
 
     <img width="280" height="250" src="http://i.imgur.com/DB3cfLX.png" class="attachment-kucuk wp-post-image" alt="_3962017" /> 
 
     <h4>Canon 7D Mark2</h4> 
 
     </a> 
 
    </div> 
 

 
    <div class="large-3 medium-4 small-6 columns"> 
 
     <a href="http://127.0.0.1/makine/canon-7d/" title="Canon 7D"> 
 
     <img width="280" height="250" src="http://i.imgur.com/lOpicbY.png" class="attachment-kucuk wp-post-image" alt="Canon EOS 7D" /> 
 
     <h4>Canon 7D</h4> 
 
     </a> 
 
    </div> 
 

 
    <div class="large-3 medium-4 small-6 columns"> 
 
     <a href="http://127.0.0.1/makine/canon-70d/" title="Canon 70D"> 
 
     <img width="280" height="250" src="http://i.imgur.com/GT0t4eo.png" class="attachment-kucuk wp-post-image" alt="Canon-eos-70-d-fotograf-makinesi" /> 
 
     <h4>Canon 70D</h4> 
 
     </a> 
 
    </div> 
 

 
    <div class="large-3 medium-4 small-6 columns"> 
 
     <a href="http://127.0.0.1/makine/canon-6d/" title="Canon 6D"> 
 
     <img width="280" height="250" src="http://i.imgur.com/y2wRSZx.png" class="attachment-kucuk wp-post-image" alt="Canon 6D" /> 
 
     <h4>Canon 6D</h4> 
 
     </a> 
 
    </div> 
 

 
    <div class="large-3 medium-4 small-6 columns"> 
 
     <a href="http://127.0.0.1/makine/canon-ef-50mm-f1-8-ii/" title="Canon EF 50mm f/1.8 II"> 
 
     <img width="280" height="250" src="http://i.imgur.com/5l2GjRG.png" class="attachment-kucuk wp-post-image" alt="Canon_EF_50mm_f18" /> 
 
     <h4>Canon EF 50mm f/1.8 II</h4> 
 
     </a> 
 
    </div> 
 

 
    </div> 
 

 

 

 
</body> 
 

 
</html>

источник

2015-09-01 ahmetlutfu

Неясно, какой результат вы хотите в этом случае? –

я думаю, что я вижу, что ваш вопрос ... когда она масштабируется вниз сетка разбивается правильно? Для чего-то вроде этого мне нравится использовать блочную сетку, это действительно пригодится - проверьте это http://codepen.io/brock8282/pen/ojXZMW

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


             
   
    
    <div class="row"> 
 

 
<div class="columns large-12"> 
 
    
 
    <ul class="small-block-grid-2 medium-block-grid-3 large-block-grid-4"> 
 
    
 
<li> 
 
     <a href="http://127.0.0.1/makine/canon-powershot-elph-310-hs/" title="Canon PowerShot Elph 310 HS"> 
 
      <img src="http://i.imgur.com/fwHd8zf.png" class="attachment-kucuk wp-post-image" alt="Canon_PowerShot_Elph_310_HS_428369_i0"> 
 
     <h4>Canon PowerShot Elph 310 HS</h4> 
 
     </a> 
 
    </li> 
 

 
<li> 
 
     <a href="http://127.0.0.1/makine/canon-powershot-s120/" title="Canon PowerShot S120"> 
 
      <img src="http://i.imgur.com/HLuFBv0.png" class="attachment-kucuk wp-post-image" alt="Canon_PowerShot_S120_890378"> 
 
      <h4>Canon PowerShot S120</h4> 
 
     </a> 
 
    </li> 
 

 
<li> 
 
     <a href="http://127.0.0.1/makine/canon-1d-x/" title="Canon 1D X"> 
 
      <img src="http://i.imgur.com/BlX05lN.png" class="attachment-kucuk wp-post-image" alt="Canon_EOS_1D_X_466261_i0"> 
 
      <h4>Canon 1D X</h4> 
 
     </a> 
 
    </li> 
 

 
<li> 
 
     <a href="http://127.0.0.1/makine/canon-7d-mark2/" title="Canon 7D Mark2"> 
 
      <img src="http://i.imgur.com/DB3cfLX.png" class="attachment-kucuk wp-post-image" alt="_3962017"> 
 
      <h4>Canon 7D Mark2</h4> 
 
     </a> 
 
    </li> 
 

 
<li> 
 
     <a href="http://127.0.0.1/makine/canon-7d/" title="Canon 7D"> 
 
      <img src="http://i.imgur.com/lOpicbY.png" class="attachment-kucuk wp-post-image" alt="Canon EOS 7D"> 
 
      <h4>Canon 7D</h4> 
 
     </a> 
 
    </li> 
 

 
<li> 
 
     <a href="http://127.0.0.1/makine/canon-70d/" title="Canon 70D"> 
 
      <img src="http://i.imgur.com/GT0t4eo.png" class="attachment-kucuk wp-post-image" alt="Canon-eos-70-d-fotograf-makinesi"> 
 
      <h4>Canon 70D</h4> 
 
     </a> 
 
    </li> 
 

 
<li> 
 
     <a href="http://127.0.0.1/makine/canon-6d/" title="Canon 6D"> 
 
      <img src="http://i.imgur.com/y2wRSZx.png" class="attachment-kucuk wp-post-image" alt="Canon 6D"> 
 
      <h4>Canon 6D</h4> 
 
     </a> 
 
    </li> 
 

 
<li> 
 
     <a href="http://127.0.0.1/makine/canon-ef-50mm-f1-8-ii/" title="Canon EF 50mm f/1.8 II"> 
 
      <img src="http://i.imgur.com/5l2GjRG.png" class="attachment-kucuk wp-post-image" alt="Canon_EF_50mm_f18"> 
 
      <h4>Canon EF 50mm f/1.8 II</h4> 
 
     </a> 
 
    </li> 
 

 
</ul> 
 
    
 
    </div></div>

источник

2015-09-08 00:08:31 brock8282

спасибо. Я преобразовал свой html-код в bootstrap для этой проблемы. Теперь я снова воспользуюсь Фондом. – ahmetlutfu

Используйте block grid компонент для этого:

Блока сетка дает вам возможность равномерно разделить содержимое списка в сетке. Если вы хотите создать строку из пяти изображений или абзацев , которые должны оставаться равномерно распределенными независимо от размера экрана, то сетка будет для вас.

источник

2015-09-08 05:20:08

на фундамент 6 blockgrid ул/li делает работу вы должны использовать один blockgrid + колонки системы

<div class="row small-up-1 medium-up-2 large-up-4"> 
    <div class="column"> 
    <img src="//placehold.it/300x300" class="thumbnail" alt=""> 
    </div> 
    <div class="column"> 
    <img src="//placehold.it/300x300" class="thumbnail" alt=""> 
    </div> 
    <div class="column"> 
    <img src="//placehold.it/300x300" class="thumbnail" alt=""> 
    </div> 
    <div class="column"> 
    <img src="//placehold.it/300x300" class="thumbnail" alt=""> 
    </div> 
    <div class="column"> 
    <img src="//placehold.it/300x300" class="thumbnail" alt=""> 
    </div> 
    <div class="column"> 
    <img src="//placehold.it/300x300" class="thumbnail" alt=""> 
    </div> 
</div>

источник

2016-01-07 18:44:03 fabiovaz

Проблема с сеткой решетки

ответ

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