不必要的空白空間apear在

頁面

.article-image1 { 
 
    height: 256px; 
 
    width: 256px; 
 
} 
 

 
.article-image1:before { 
 
    content: ''; 
 
    position: absolute; 
 
    height: 100%; 
 
    width: 100%; 
 
    top: 0; 
 
    left: 0; 
 
    background-image: url(http://limootoys.com/wp-content/uploads/gentleman-e1508436248648.png); 
 
    -webkit-filter: grayscale(0) blur(0); 
 
    filter: grayscale(0) blur(0); 
 
    transition: .4s ease-in-out; 
 
} 
 

 
.article-image1:hover:before { 
 
    -webkit-filter: grayscale(100%) blur(2px); 
 
    filter: grayscale(100%) blur(2px); 
 
    transition: .4s ease-in-out; 
 
} 
 

 
.ar-image1 { 
 
    position: relative; 
 
    width: 256px; 
 
    height: 256px; 
 
    top: 0; 
 
    right: 0; 
 
} 
 

 
.article-image1>p { 
 
    display: none; 
 
} 
 

 
.article-image1:hover>p { 
 
    position: absolute; 
 
    top: 50%; 
 
    display: block; 
 
    color: #fed700; 
 
    text-shadow: 3px 3px #000000; 
 
    font-size: 50px; 
 
    font-weight: bold; 
 
    z-index: 9999999; 
 
    width: 100%; 
 
    height: 100%; 
 
    text-align: center; 
 
    transition: .4s ease-in-out; 
 
} 
 

 

 
/*puzzle*/ 
 

 
.article-image2 { 
 
    height: 256px; 
 
    width: 256px; 
 
} 
 

 
.article-image2:before { 
 
    content: ''; 
 
    position: absolute; 
 
    height: 100%; 
 
    width: 100%; 
 
    top: 0; 
 
    left: 0; 
 
    background-image: url(http://limootoys.com/wp-content/uploads/puzzle.png); 
 
    -webkit-filter: grayscale(0) blur(0); 
 
    filter: grayscale(0) blur(0); 
 
    transition: .4s ease-in-out; 
 
} 
 

 
.article-image2:hover:before { 
 
    -webkit-filter: grayscale(100%) blur(2px); 
 
    filter: grayscale(100%) blur(2px); 
 
    transition: .4s ease-in-out; 
 
} 
 

 
.ar-image2 { 
 
    position: relative; 
 
    width: 256px; 
 
    height: 256px; 
 
    top: -286px; 
 
    right: 306px; 
 
} 
 

 
.article-image2>p { 
 
    display: none; 
 
} 
 

 
.article-image2:hover>p { 
 
    position: absolute; 
 
    top: 50%; 
 
    display: block; 
 
    color: #fed700; 
 
    text-shadow: 3px 3px #000000; 
 
    font-size: 50px; 
 
    font-weight: bold; 
 
    z-index: 9999999; 
 
    width: 100%; 
 
    height: 100%; 
 
    text-align: center; 
 
    transition: .4s ease-in-out; 
 
} 
 

 

 
/*Maket*/ 
 

 
.article-image3 { 
 
    height: 256px; 
 
    width: 256px; 
 
} 
 

 
.article-image3:before { 
 
    content: ''; 
 
    position: absolute; 
 
    height: 100%; 
 
    width: 100%; 
 
    top: 0; 
 
    left: 0; 
 
    background-image: url(http://limootoys.com/wp-content/uploads/minivan.png); 
 
    -webkit-filter: grayscale(0) blur(0); 
 
    filter: grayscale(0) blur(0); 
 
    transition: .4s ease-in-out; 
 
} 
 

 
.article-image3:hover:before { 
 
    -webkit-filter: grayscale(100%) blur(2px); 
 
    filter: grayscale(100%) blur(2px); 
 
    transition: .4s ease-in-out; 
 
} 
 

 
.ar-image3 { 
 
    position: relative; 
 
    width: 256px; 
 
    height: 256px; 
 
    top: -572px; 
 
    right: 662px; 
 
} 
 

 
.article-image3>p { 
 
    display: none; 
 
} 
 

 
.article-image3:hover>p { 
 
    position: absolute; 
 
    top: 50%; 
 
    display: block; 
 
    color: #fed700; 
 
    text-shadow: 3px 3px #000000; 
 
    font-size: 50px; 
 
    font-weight: bold; 
 
    z-index: 9999999; 
 
    width: 100%; 
 
    height: 100%; 
 
    text-align: center; 
 
    transition: .4s ease-in-out; 
 
} 
 

 

 
/*figure*/ 
 

 
.article-image4 { 
 
    height: 256px; 
 
    width: 256px; 
 
} 
 

 
.article-image4:before { 
 
    content: ''; 
 
    position: absolute; 
 
    height: 100%; 
 
    width: 100%; 
 
    top: 0; 
 
    left: 0; 
 
    background-image: url(http://limootoys.com/wp-content/uploads/batman.png); 
 
    -webkit-filter: grayscale(0) blur(0); 
 
    filter: grayscale(0) blur(0); 
 
    transition: .4s ease-in-out; 
 
} 
 

 
.article-image4:hover:before { 
 
    -webkit-filter: grayscale(100%) blur(2px); 
 
    filter: grayscale(100%) blur(2px); 
 
    transition: .4s ease-in-out; 
 
} 
 

 
.ar-image4 { 
 
    position: relative; 
 
    width: 256px; 
 
    height: 256px; 
 
    top: -512px; 
 
    right: 0px; 
 
} 
 

 
.article-image4>p { 
 
    display: none; 
 
} 
 

 
.article-image4:hover>p { 
 
    position: absolute; 
 
    top: 50%; 
 
    display: block; 
 
    color: #fed700; 
 
    text-shadow: 3px 3px #000000; 
 
    font-size: 50px; 
 
    font-weight: bold; 
 
    z-index: 9999999; 
 
    width: 100%; 
 
    height: 100%; 
 
    text-align: center; 
 
    transition: .4s ease-in-out; 
 
} 
 

 

 
/*toys*/ 
 

 
.article-image5 { 
 
    height: 256px; 
 
    width: 256px; 
 
} 
 

 
.article-image5:before { 
 
    content: ''; 
 
    position: absolute; 
 
    height: 100%; 
 
    width: 100%; 
 
    top: 0; 
 
    left: 0; 
 
    background-image: url(http://limootoys.com/wp-content/uploads/robot.png); 
 
    -webkit-filter: grayscale(0) blur(0); 
 
    filter: grayscale(0) blur(0); 
 
    transition: .4s ease-in-out; 
 
} 
 

 
.article-image5:hover:before { 
 
    -webkit-filter: grayscale(100%) blur(2px); 
 
    filter: grayscale(100%) blur(2px); 
 
    transition: .4s ease-in-out; 
 
} 
 

 
.ar-image5 { 
 
    position: relative; 
 
    width: 256px; 
 
    height: 256px; 
 
    top: -798px; 
 
    right: 306px; 
 
} 
 

 
.article-image5>p { 
 
    display: none; 
 
} 
 

 
.article-image5:hover>p { 
 
    position: absolute; 
 
    top: 50%; 
 
    display: block; 
 
    color: #fed700; 
 
    text-shadow: 3px 3px #000000; 
 
    font-size: 50px; 
 
    font-weight: bold; 
 
    z-index: 9999999; 
 
    width: 100%; 
 
    height: 100%; 
 
    text-align: center; 
 
    transition: .4s ease-in-out; 
 
} 
 

 

 
/*entertaimnt*/ 
 

 
.article-image6 { 
 
    height: 256px; 
 
    width: 256px; 
 
} 
 

 
.article-image6:before { 
 
    content: ''; 
 
    position: absolute; 
 
    height: 100%; 
 
    width: 100%; 
 
    top: 0; 
 
    left: 0; 
 
    background-image: url(http://limootoys.com/wp-content/uploads/magician.png); 
 
    -webkit-filter: grayscale(0) blur(0); 
 
    filter: grayscale(0) blur(0); 
 
    transition: .4s ease-in-out; 
 
} 
 

 
.article-image6:hover:before { 
 
    -webkit-filter: grayscale(100%) blur(2px); 
 
    filter: grayscale(100%) blur(2px); 
 
    transition: .4s ease-in-out; 
 
} 
 

 
.ar-image6 { 
 
    position: relative; 
 
    width: 256px; 
 
    height: 256px; 
 
    top: -1084px; 
 
    right: 662px; 
 
} 
 

 
.article-image6>p { 
 
    display: none; 
 
} 
 

 
.article-image6:hover>p { 
 
    position: absolute; 
 
    top: 50%; 
 
    display: block; 
 
    color: #fed700; 
 
    text-shadow: 3px 3px #000000; 
 
    font-size: 50px; 
 
    font-weight: bold; 
 
    z-index: 9999999; 
 
    width: 100%; 
 
    height: 100%; 
 
    text-align: center; 
 
    transition: .4s ease-in-out; 
 
}

<a style="display:block" href="http://limootoys.com/?product_cat=lego"> 
 
<div class="ar-image1"> 
 
<div class="article-image1"> 
 
<p>لگو</p> 
 
</div> 
 
</div> 
 
</a> 
 
<a style="display:block" href="http://limootoys.com/?product_cat=puzzle"> 
 
<div class="ar-image2"> 
 
<div class="article-image2"> 
 
<p>پازل</p> 
 
</div> 
 
</div> 
 
</a> 
 
<a style="display:block" href="http://limootoys.com/?product_cat=maket"> 
 
<div class="ar-image3"> 
 
<div class="article-image3"> 
 
<p>ماکت</p> 
 
</div> 
 
</div> 
 
</a> 
 
<a style="display:block" href="http://limootoys.com/?product_cat=figure"> 
 
<div class="ar-image4"> 
 
<div class="article-image4"> 
 
<p>فیگور</p> 
 
</div> 
 
</div> 
 
</a> 
 
<a style="display:block" href="http://limootoys.com/?product_cat=toys"> 
 
<div class="ar-image5"> 
 
<div class="article-image5"> 
 
<p>اسباب بازی</p> 
 
</div> 
 
</div> 
 
</a> 
 
<a style="display:block" href="http://limootoys.com/?product_cat=entertaiment"> 
 
<div class="ar-image6"> 
 
<div class="article-image6"> 
 
<p>سرگرمی</p> 
 
</div> 
 
</div> 
 
</a>

我想創建一個菜單，我的網站有一些可點擊圖標，但是當我使用上面的代碼中一些不需要的空白空間出現的結束。另外，當我使用手機訪問該頁面時，圖標完全顯示爲網格。您可以檢查my site以查看實際發生的情況。任何幫助消除這些空的空間將不勝感激。

來源

2017-10-21 Ali Noori

簡單看你的代碼，它看起來像你的實施引導，什麼都有很好的規模不同的視口我想嘗試實施解決方案如下：

根據您的輸入內容的div ：

<div class="container"> 
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 img-icon"> 
    <div class="ar-image1"> 
     <a style="display:block" href="http://limootoys.com/?product_cat=lego"> 
      <div class="article-image1"> 
       <p>لگو</p> 
      </div> 
     </a> 
    </div> 
</div> 
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 img-icon"> 
    <div class="ar-image2"> 
     <a style="display:block" href="http://limootoys.com/?product_cat=puzzle"> 
      <div class="article-image2"> 
       <p>لگو</p> 
      </div> 
     </a> 
    </div> 
</div> 
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 img-icon"> 
    <div class="ar-image3"> 
     <a style="display:block" href="http://limootoys.com/?product_cat=maket"> 
      <div class="article-image3"> 
       <p>لگو</p> 
      </div> 
     </a> 
    </div> 
</div> 
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 img-icon"> 
    <div class="ar-image4"> 
     <a style="display:block" href="http://limootoys.com/?product_cat=figure"> 
      <div class="article-image4"> 
       <p>لگو</p> 
      </div> 
     </a> 
    </div> 
</div> 
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 img-icon"> 
    <div class="ar-image5"> 
     <a style="display:block" href="http://limootoys.com/?product_cat=toys"> 
      <div class="article-image5"> 
       <p>لگو</p> 
      </div> 
     </a> 
    </div> 
</div> 
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 img-icon"> 
    <div class="ar-image6"> 
     <a style="display:block" href="http://limootoys.com/?product_cat=entertainment"> 
      <div class="article-image6"> 
       <p>لگو</p> 
      </div> 
     </a> 
    </div> 
</div> 
</div>

對於你的CSS修改如下：

.article-image1 { 
    position: relative; 
    display: block; 
    margin: auto; 
    height: 256px; 
    width: 256px; 
} 

.article-image1:before { 
    content: ''; 
    position: absolute; 
    height: 100%; 
    width: 100%; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background-image: url(http://limootoys.com/wp-content/uploads/gentleman-e1508436248648.png); 
    background-repeat: no-repeat; 
    background-position: center; 
    -webkit-filter: grayscale(0) blur(0); 
    filter: grayscale(0) blur(0); 
    transition: .4s ease-in-out; 
} 

.article-image1:hover:before { 
    -webkit-filter: grayscale(100%) blur(2px); 
    filter: grayscale(100%) blur(2px); 
    transition: .4s ease-in-out; 
} 

.ar-image1 { 
    position: relative; 
    width: 256px; 
    height: 256px; 
    display: block; 
    margin: auto; 
} 

.article-image1>p { 
    display: none; 
} 

.article-image1:hover>p { 
    position: absolute; 
    top: 50%; 
    left: 0; 
    display: block; 
    color: #fed700; 
    text-shadow: 3px 3px #000000; 
    font-size: 50px; 
    font-weight: bold; 
    z-index: 9999999; 
    width: 100%; 
    height: 100%; 
    text-align: center; 
    transition: .4s ease-in-out; 
} 


/*puzzle*/ 

.article-image2 { 
    position: relative; 
    display: block; 
    margin: auto; 
    height: 256px; 
    width: 256px; 
} 

.article-image2:before { 
    content: ''; 
    position: absolute; 
    height: 100%; 
    width: 100%; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background-image: url(http://limootoys.com/wp-content/uploads/puzzle.png); 
    background-repeat: no-repeat; 
    background-position: center; 
    -webkit-filter: grayscale(0) blur(0); 
    filter: grayscale(0) blur(0); 
    transition: .4s ease-in-out; 
} 

.article-image2:hover:before { 
    -webkit-filter: grayscale(100%) blur(2px); 
    filter: grayscale(100%) blur(2px); 
    transition: .4s ease-in-out; 
} 

.ar-image2 { 
    position: relative; 
    width: 256px; 
    height: 256px; 
    display: block; 
    margin: auto; 
} 

.article-image2>p { 
    display: none; 
} 

.article-image2:hover>p { 
    position: absolute; 
    top: 50%; 
    left: 0; 
    display: block; 
    color: #fed700; 
    text-shadow: 3px 3px #000000; 
    font-size: 50px; 
    font-weight: bold; 
    z-index: 9999999; 
    width: 100%; 
    height: 100%; 
    text-align: center; 
    transition: .4s ease-in-out; 
} 


/*Maket*/ 

.article-image3 { 
    position: relative; 
    display: block; 
    margin: auto; 
    height: 256px; 
    width: 256px; 
} 

.article-image3:before { 
    content: ''; 
    position: absolute; 
    height: 100%; 
    width: 100%; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background-image: url(http://limootoys.com/wp-content/uploads/minivan.png); 
    background-repeat: no-repeat; 
    background-position: center; 
    -webkit-filter: grayscale(0) blur(0); 
    filter: grayscale(0) blur(0); 
    transition: .4s ease-in-out; 
} 

.article-image3:hover:before { 
    -webkit-filter: grayscale(100%) blur(2px); 
    filter: grayscale(100%) blur(2px); 
    transition: .4s ease-in-out; 
} 

.ar-image3 { 
    position: relative; 
    width: 256px; 
    height: 256px; 
    display: block; 
    margin: auto;; 
} 

.article-image3>p { 
    display: none; 
} 

.article-image3:hover>p { 
    position: absolute; 
    top: 50%; 
    left: 0; 
    display: block; 
    color: #fed700; 
    text-shadow: 3px 3px #000000; 
    font-size: 50px; 
    font-weight: bold; 
    z-index: 9999999; 
    width: 100%; 
    height: 100%; 
    text-align: center; 
    transition: .4s ease-in-out; 
} 


/*figure*/ 

.article-image4 { 
    position: relative; 
    display: block; 
    margin: auto; 
    height: 256px; 
    width: 256px; 
} 

.article-image4:before { 
    content: ''; 
    position: absolute; 
    height: 100%; 
    width: 100%; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background-image: url(http://limootoys.com/wp-content/uploads/batman.png); 
    background-repeat: no-repeat; 
    background-position: center; 
    -webkit-filter: grayscale(0) blur(0); 
    filter: grayscale(0) blur(0); 
    transition: .4s ease-in-out; 
} 

.article-image4:hover:before { 
    -webkit-filter: grayscale(100%) blur(2px); 
    filter: grayscale(100%) blur(2px); 
    transition: .4s ease-in-out; 
} 

.ar-image4 { 
    position: relative; 
    width: 256px; 
    height: 256px; 
    display: block; 
    margin: auto; 
} 

.article-image4>p { 
    display: none; 
} 

.article-image4:hover>p { 
    position: absolute; 
    top: 50%; 
    left: 0; 
    display: block; 
    color: #fed700; 
    text-shadow: 3px 3px #000000; 
    font-size: 50px; 
    font-weight: bold; 
    z-index: 9999999; 
    width: 100%; 
    height: 100%; 
    text-align: center; 
    transition: .4s ease-in-out;; 
} 


/*toys*/ 

.article-image5 { 
    position: relative; 
    display: block; 
    margin: auto; 
    height: 256px; 
    width: 256px; 
} 

.article-image5:before { 
    content: ''; 
    position: absolute; 
    height: 100%; 
    width: 100%; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background-image: url(http://limootoys.com/wp-content/uploads/robot.png); 
    background-repeat: no-repeat; 
    background-position: center; 
    -webkit-filter: grayscale(0) blur(0); 
    filter: grayscale(0) blur(0); 
    transition: .4s ease-in-out; 
} 

.article-image5:hover:before { 
    -webkit-filter: grayscale(100%) blur(2px); 
    filter: grayscale(100%) blur(2px); 
    transition: .4s ease-in-out; 
} 

.ar-image5 { 
    position: relative; 
    width: 256px; 
    height: 256px; 
    display: block; 
    margin: auto; 
} 

.article-image5>p { 
    display: none; 
} 

.article-image5:hover>p { 
    position: absolute; 
    top: 50%; 
    left: 0; 
    display: block; 
    color: #fed700; 
    text-shadow: 3px 3px #000000; 
    font-size: 50px; 
    font-weight: bold; 
    z-index: 9999999; 
    width: 100%; 
    height: 100%; 
    text-align: center; 
    transition: .4s ease-in-out;; 
} 


/*entertaimnt*/ 

.article-image6 { 
    position: relative; 
    display: block; 
    margin: auto; 
    height: 256px; 
    width: 256px; 
} 

.article-image6:before { 
    content: ''; 
    position: absolute; 
    height: 100%; 
    width: 100%; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background-image: url(http://limootoys.com/wp-content/uploads/magician.png); 
    background-repeat: no-repeat; 
    background-position: center; 
    -webkit-filter: grayscale(0) blur(0); 
    filter: grayscale(0) blur(0); 
    transition: .4s ease-in-out; 
} 

.article-image6:hover:before { 
    -webkit-filter: grayscale(100%) blur(2px); 
    filter: grayscale(100%) blur(2px); 
    transition: .4s ease-in-out; 
} 

.ar-image6 { 
    position: relative; 
    width: 256px; 
    height: 256px; 
    display: block; 
    margin: auto; 
} 

.article-image6>p { 
    display: none; 
} 

.article-image6:hover>p { 
    position: absolute; 
    top: 50%; 
    left: 0; 
    display: block; 
    color: #fed700; 
    text-shadow: 3px 3px #000000; 
    font-size: 50px; 
    font-weight: bold; 
    z-index: 9999999; 
    width: 100%; 
    height: 100%; 
    text-align: center; 
    transition: .4s ease-in-out; 
} 

.entry-content .img-icon { 
    padding: 10px; 
}

這應該給你你想要的解決方案，目前正在與你有補丁，你的手機不能正常規模。讓我知道這是否有效，或者您有任何問題！

祝你好運，

詹姆斯

編輯的簡單性編：

爲了進一步減少雜波在你的CSS，即不斷地定義父元素相同的屬性並避免在你的html中使用內聯css，看看下面的修改，看看我已經實現了你的文章圖像的類和ID，應該更容易你要保持，如果你打算更新或改變任何東西！

HTML如下：

<div class="container"> 
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 img-icon"> 
    <div class="ar-image"> 
     <a href="http://limootoys.com/?product_cat=lego"> 
      <div class="article-image" id="lego"> 
       <p>لگو</p> 
      </div> 
     </a> 
    </div> 
</div> 
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 img-icon"> 
    <div class="ar-image"> 
     <a href="http://limootoys.com/?product_cat=puzzle"> 
      <div class="article-image" id="puzzle"> 
       <p>لگو</p> 
      </div> 
     </a> 
    </div> 
</div> 
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 img-icon"> 
    <div class="ar-image"> 
     <a href="http://limootoys.com/?product_cat=maket"> 
      <div class="article-image" id="maket"> 
       <p>لگو</p> 
      </div> 
     </a> 
    </div> 
</div> 
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 img-icon"> 
    <div class="ar-image"> 
     <a href="http://limootoys.com/?product_cat=figure"> 
      <div class="article-image" id="figure"> 
       <p>لگو</p> 
      </div> 
     </a> 
    </div> 
</div> 
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 img-icon"> 
    <div class="ar-image"> 
     <a href="http://limootoys.com/?product_cat=toys"> 
      <div class="article-image" id="toys"> 
       <p>لگو</p> 
      </div> 
     </a> 
    </div> 
</div> 
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 img-icon"> 
    <div class="ar-image"> 
     <a href="http://limootoys.com/?product_cat=entertainment"> 
      <div class="article-image" id="entertainment"> 
       <p>لگو</p> 
      </div> 
     </a> 
    </div> 
</div> 
</div>

CSS如下：

.ar-image { 
    position: relative; 
    width: 256px; 
    height: 256px; 
    display: block; 
    margin: auto; 
} 

.article-image { 
    position: relative; 
    display: block; 
    margin: auto; 
    height: 256px; 
    width: 256px; 
} 

.article-image:before { 
    content: ''; 
    position: absolute; 
    height: 100%; 
    width: 100%; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background-repeat: no-repeat; 
    background-position: center; 
    -webkit-filter: grayscale(0) blur(0); 
    filter: grayscale(0) blur(0); 
    transition: .4s ease-in-out; 
} 

.article-image:hover:before { 
    -webkit-filter: grayscale(100%) blur(2px); 
    filter: grayscale(100%) blur(2px); 
    transition: .4s ease-in-out; 
} 

.article-image>p { 
    display: none; 
} 

.article-image:hover>p { 
    position: absolute; 
    top: 50%; 
    left: 0; 
    display: block; 
    color: #fed700; 
    text-shadow: 3px 3px #000000; 
    font-size: 50px; 
    font-weight: bold; 
    z-index: 9999999; 
    width: 100%; 
    height: 100%; 
    text-align: center; 
    transition: .4s ease-in-out; 
} 

#lego:before { 
    background-image: url(http://limootoys.com/wp-content/uploads/gentleman-e1508436248648.png); 
} 

#puzzle:before { 
    background-image: url(http://limootoys.com/wp-content/uploads/puzzle.png); 
} 

#maket:before { 
    background-image: url(http://limootoys.com/wp-content/uploads/minivan.png); 
} 

#figure:before { 
    background-image: url(http://limootoys.com/wp-content/uploads/batman.png); 
} 

#toys:before { 
    background-image: url(http://limootoys.com/wp-content/uploads/robot.png); 
} 

#entertainment:before { 
    background-image: url(http://limootoys.com/wp-content/uploads/magician.png); 
} 

.entry-content .img-icon { 
    padding: 10px; 
} 

.entry-content .img-icon a { 
    display: block; 
}

來源

2017-10-21 13:16:29 jstoobz

感謝詹姆斯，你是對的，它沒有在移動設備上正確縮放，但是你的代碼已修復！ –

阿里沒問題，總是樂於幫忙。看看我剛更新的原版下面的編輯版本。觀察我如何使用文章圖像的類和ID來減少聲明所有圖像圖標中相同屬性的冗餘。另外，儘量避免不惜一切代價使用內聯css，它將在將來進行樣式更改時幫助您，這樣您就不必使用！important或返回到您的html以獲得所需的更改。快樂編碼我的朋友！ – jstoobz

多麼美麗的一段代碼！謝謝。我在編碼方面很努力，所以你的解釋非常有幫助！我會記住他們。 –

只是刪除前，所有的這一權利atributes對象： AR-圖像1，AR-圖像2，AR-圖像3，AR-圖像4，AR-圖像5，AR-image6

，並添加到您的CSS：

.entry-content a { 
    float: right; 
}

來源

2017-10-21 11:56:47

感謝Rahele，我確實如你所說，但現在第一行中的圖標不具有相同的高度！如果可能，我希望圖標分爲兩行三列。 –

試試這個：.entry-content a {float}：right; 寬度：33％; margin-bottom：48px; } .entry-content p { display：none; } #content { margin-bottom：10px; } –

你是一個拯救生命的人！奇蹟般有效。非常感謝。 –

不必要的空白空間apear在

回答

相關問題