對于移動設備應該只顯示一個影像，但對于桌面應該有兩個相鄰的影像。這兩個影像在一個部分中，但在各自的 div 中分開。 此處 HMTL 部分的圖片與影像 如何在桌面上顯示第二個影像并仍然將它們彼此相鄰放置。我試過使用 float 但它取消了 display: block 并且第二個影像不會顯示。 我使用 @Media 查詢的 CSS 樣式的圖片
uj5u.com熱心網友回復：
我們的 CSS 代碼如下。影像CSS：
img {
height: auto;
max-width: 100%;
}
.image-table {
border: 0px solid rgba(0, 0, 0, 0);
border-collapse: separate;
border-spacing: 6px;
table-layout: fixed;
text-align: center;
width: 100%;
}
.image-table img {
border: 10px solid #fff;
box-sizing: border-box;
-webkit-box-shadow: 0 0 10px #999;
box-shadow: 0 0 10px #999;
}
#sec-profil .col-md-3{
clear: both !important;
}
我們的 HTML 代碼如下。
<table class="image-table">
<tbody>
<tr>
<td>
<img id="sec-profil" src="img-link-1" alt="" title="">
</td>
<td>
<img id="sec-profil" src="img-link-2" alt="" title="">
</td>
<td>
<img id="sec-profil" src="img-link-3" alt="" title="">
</td>
</tr>
</tbody>
</table>
uj5u.com熱心網友回復：
.desktop-picture{display:inline-block}
洗掉浮動并將行內塊應用于樣式中的 div，您的影像將對齊。
uj5u.com熱心網友回復：
使用網格（或彈性框）并排獲取影像。如果您想在影像之間留出一些空間，請使用 grid-gap（如果您不想要，請忽略它）。要在移動設備上隱藏第二張影像，請使用 display: none 然后 display: block 在桌面上。
這是一個有關如何執行此白色網格的示例：
<div class="container">
<img src="https://hddesktopwallpapers.in/wp-content/uploads/2015/09/goose-mages.jpg" alt=""/>
<img src="https://hddesktopwallpapers.in/wp-content/uploads/2015/09/goose-images.jpg" alt="" class="display-none-mobile"/>
</div>
.container {
display: grid;
grid-gap: 1rem;
}
.display-none-mobile {
display:none;
}
@media (min-width: 600px) {
.container {
/* if you want one image to take more with you ca set 2fr 1fr or 3fr 2fr */
grid-template-columns: 1fr 1fr;
}
.display-none-mobile {
display:block;
}
}
/* this is so the images don't take to much width, will be applied to all images */
img {
max-width: 100%;
}
uj5u.com熱心網友回復：
確保 .desktop-picture 設定為 display: none; 默認情況下，然后將其設定為 display: inline; 在媒體查詢中。
uj5u.com熱心網友回復：
我強烈建議不要使用float's. 這是一個使用flexandflex-flow媒體查詢更改為flex-flow: row;并排對齊影像的示例。
.parent {
display: flex;
flex-flow: column;
width: 50%;
margin: auto;
}
img {
max-width: 100%;
}
@media only screen and (max-width: 600px) {
.parent {
flex-flow: row;
justify-content: center;
}
}<div class="parent">
<img src="https://dummyimage.com/200/#ffd11/blue">
<img src="https://dummyimage.com/200/#ffd11/blue">
</div>另一個例子 w/ grid。
.parent {
display: grid;
grid-template-columns: 1fr;
place-items: center;
}
img {
max-width: 100%;
}
@media only screen and (max-width: 600px) {
.parent {
grid-template-columns: 1fr 1fr;
}
}<div class="parent">
<img src="https://dummyimage.com/200/#ffd11/blue">
<img src="https://dummyimage.com/200/#ffd11/blue">
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/477053.html
上一篇：dsl查詢到Lucene查詢