1. 首頁
  2. 問答
  3. 響應式CSS：組織圖像問題

響應式CSS：組織圖像問題

2015-11-16 78 views
2

我試圖佈局我的圖像，因此當移動設備看到它們時，它們被分成2列，當大型設備看到它們時，它們被分成3列。簡單。響應式CSS：組織圖像問題

但是，有一個問題。我的每個圖像都有一個標題，其中一些比其他圖像長，並且因此（在移動視圖中）當圖像以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的部分：響應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; 
}

部分：

@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; 
}

謝謝

來源

2015-11-16 Edwarric

+0

謝謝大家的回覆！我設法找到了解決方案:) – Edwarric

回答

0

通常你會翻轉從你在做什麼的響應，讓你設計一個更大的屏幕和響應處理的屏幕較小（最大寬度：480像素，而不是分鐘-width：480像素）。因爲你這樣做，我會假設你必須出於某種原因。

添加到您的CSS的主要部分：

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

然後將其添加到響應部分：

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

這只是告訴它分裂每秒之一。沒有指令，代碼不太清楚如何處理更長的文本。簡單但有效。

來源

2015-11-16 04:12:55 Moondoggy

+0

簡單而有效，歡呼！ :) – Edwarric

0

我可以理解你的問題。由於字幕的大小不同，對齊問題可能會像您早期描述的那樣發生。

你可以做的是

  1. 包裹在一個div的圖片和標題

  2. 給予一定的最小高度到div（CSS修復）

  3. 或者使用此方法（我推薦）

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並嘗試運行代碼，會發生對齊問題。

來源

2015-11-16 02:27:16

0

我想，如果你會使用和而不是浮動的列表項漂浮在整個列表UL等寬（33.33％）三大列，那麼這個過程可能幫你。

如果你需要在移動視圖中的兩個欄，然後只需改變UL的寬度50％，所以現在的第三列是問題，你可以使用100％寬度爲列或通過使用JavaScript技術，您可以將第三列的項目等分爲其他兩列。我目前不記得那種技術，但是你可以谷歌它，因爲我在谷歌成立了這項技術。

檢查下面的例子。

/*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>

來源

2015-11-16 03:52:53 web2tips

相關問題

 相關問題