基础网格系统问题
Foundation Grid System Issue
我正在通过 Foundation 开发网站。但是我的网格系统不能正常工作。每当我将浏览器宽度调整为 1596px、1440px 和 1333px 时;网格系统无法正常工作。我把我的源代码放到
代码笔:
我得到了我的屏幕截图视频。
<!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>
我想我知道你的问题是什么......当它按比例缩小时,网格是否正确?对于这样的事情,我喜欢使用块状网格,它真的派上用场了 - 检查一下 http://codepen.io/brock8282/pen/ojXZMW
另外,尝试使用 li 的均衡器使一切保持一致。
<div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre><code><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>
我正在通过 Foundation 开发网站。但是我的网格系统不能正常工作。每当我将浏览器宽度调整为 1596px、1440px 和 1333px 时;网格系统无法正常工作。我把我的源代码放到
代码笔:
我得到了我的屏幕截图视频。
<!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>
我想我知道你的问题是什么......当它按比例缩小时,网格是否正确?对于这样的事情,我喜欢使用块状网格,它真的派上用场了 - 检查一下 http://codepen.io/brock8282/pen/ojXZMW
另外,尝试使用 li 的均衡器使一切保持一致。
<div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre><code><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>