1. 首頁
  2. 問答
  3. 使響應多個div

使響應多個div

2017-02-21 69 views
0

我有頁面，我顯示4圖像 - 每行2 2。我現在試圖讓它們在移動設備上打開頁面時能夠響應，但我無法弄清楚如何做到這一點。使響應多個div

所以我有這個網站

<div id="wrapper"> 
    <div id="main-content"> 
    <div id="img-row" > 
     <a href=""><button class="button"> Ask </button> </a> 
    </div> 
    <div id="img-row"> 
     <a href=""><img src="http://assets.barcroftmedia.com.s3-website-eu-west-1.amazonaws.com/assets/images/recent-images-11.jpg" class="images" /><figcaption class="wp-caption-text">Title 1</figcaption></a> 
     <a href=""><img src="http://assets.barcroftmedia.com.s3-website-eu-west-1.amazonaws.com/assets/images/recent-images-11.jpg" class="images" /><figcaption class="wp-caption-text">Title 2</figcaption></a> 
    </div> 
    <div id="img-row"> 
     <a href=""> <img src="http://assets.barcroftmedia.com.s3-website-eu-west-1.amazonaws.com/assets/images/recent-images-11.jpg" class="images" /><figcaption class="wp-caption-text">Title 3</figcaption></a> 
     <a href=""> <img src="http://assets.barcroftmedia.com.s3-website-eu-west-1.amazonaws.com/assets/images/recent-images-11.jpg" class="images" /><figcaption class="wp-caption-text">Title 4</figcaption></a> 
    </div> 
    </div> 
</div>

而CSS

#wrapper { 
    margin: 0 auto; 
    width: 960px; 
} 
#main-content { 
    background: #fff; 
    padding: 7px 7px 7px 7px; 
    width: 946px; 
    min-height: 400px; 
    float: left; 
} 

.images { 
    text-align: center; 
    padding: 15px 15px; 
    position: relative; 
    vertical-align: middle; 
    display: inline; 
    width: 430px; 
    margin: 10px 0; 
} 
#img-row { 
    display: block; 
    margin-top: -15px; 
    position: relative; 
    height: auto; 
    max-width: auto; 
    overflow-y: hidden; 
    overflow-x: auto; 
    word-wrap: normal; 
    white-space: nowrap; 
    text-align: center; 
} 
#img-row > a { 
    position: relative; 
} 
#img-row:after { 
    content: ""; 
    position: absolute; 
    display: block; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    z-index: 1; 
} 
.button { 
    display: block; 
    background-color: #bbb; 
    margin: 10px; 
} 
button.button { 
    width: 570px; 
    margin-left: 182px; 
    height: 40px; 
    font-size: 30px; 
} 
.wp-caption-text { 
    display: block; 
    position: absolute; 
    width: 100%; 
    color: white; 
    left: 0; 
    top: -30px; 
    bottom: 1px; 
    padding: 5px; 
    font-weight: bolder; 
    z-index: 2; 
    font-size: 40px; 

}

現在我試着在CSS media screen查詢添加，但沒有任何區別。爲了發佈圖像，我準備了JSFiddle演示。

這裏是演示如何看起來像：https://jsfiddle.net/vxu7rvv7/

我試過幾個解決方案從其他線程在這裏，但我不能讓它工作。事實上，媒體屏幕屬性是從另一個線程。

任何人都可以幫我一下嗎？

來源

2017-02-21 VLS

+0

您不使用引導？ –

+0

使用Bootstrap使其響應。 –

+0

我不能在這裏使用引導程序。通常我使用bootstrap，但這裏需要重新編寫整個站點。是舊網站。這不是我的電話對不起 – VLS

回答

1

最好的方法將使用一些響應的框架。替換CSS我希望它會讓你的圖像響應所有設備。

<div id="wrapper"> 
    <div id="main-content"> 
    <div id="img-row" > 
     <a href=""><button class="button"> Ask </button> </a> 
    </div> 
    <div id="img-row"> 

     <div class="img-item"> 
      <a href="#"><img src="http://assets.barcroftmedia.com.s3-website-eu-west-1.amazonaws.com/assets/images/recent-images-11.jpg" class="images" /><figcaption class="wp-caption-text">Title 1</figcaption></a> 
     </div> 
     <div class="img-item"> 
      <a href="#"><img src="http://assets.barcroftmedia.com.s3-website-eu-west-1.amazonaws.com/assets/images/recent-images-11.jpg" class="images" /><figcaption class="wp-caption-text">Title 2</figcaption></a> 
     </div> 

    </div> 
    <div id="img-row"> 
     <div class="img-item"> 
      <a href="#"><img src="http://assets.barcroftmedia.com.s3-website-eu-west-1.amazonaws.com/assets/images/recent-images-11.jpg" class="images" /><figcaption class="wp-caption-text">Title 1</figcaption></a> 
     </div> 
     <div class="img-item"> 
      <a href="#"><img src="http://assets.barcroftmedia.com.s3-website-eu-west-1.amazonaws.com/assets/images/recent-images-11.jpg" class="images" /><figcaption class="wp-caption-text">Title 2</figcaption></a> 
     </div> 
    </div> 
    </div> 
</div>

，並使用該CSS

#wrapper { 
    margin: 0 auto; 
    max-width: 960px; 
} 

#main-content { 
    background: #fff; 
    padding: 7px; 
    width: 100%; 
    min-height: 400px; 
    box-sizing: border-box; 
} 

.img-item { 
    padding: 15px 15px; 
    width: 50%; 
    margin: 10px 0; 
    float: left; 
    box-sizing: border-box; 
    position: relative; 
} 

.images { 
    width: 100%; 
    position: relative; 
    z-index: 50; 
} 

#img-row > a { 
    position: relative; 
} 

#img-row { 
    overflow: hidden; 
} 

#img-row:after { 
    content: ""; 
    position: absolute; 
    display: block; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    z-index: 1; 
} 

.button { 
    display: block; 
    background-color: #bbb; 
    margin: 10px; 
} 

button.button { 
    width: 250px; 
    margin: 25px auto; 
    height: 40px; 
    font-size: 30px; 
} 

.wp-caption-text { 
    display: block; 
    position: absolute; 
    width: 100%; 
    color: #ffffff; 
    top: 50%; 
    left: 0; 
    right: 0; 
    text-align: center; 
    font-weight: 700; 
    z-index: 200; 
    font-size: 40px; 
    transform: translateY(-50%) 
} 

@media screen and (max-width: 767px) { 
    .img-item { 
     padding: 7px; 
     width: 100%; 
    } 
}

JSFiddle

來源

2017-02-21 07:37:56

+0

謝謝，但我希望他們下一個。像其他答案一樣。 – VLS

+0

http://busysimon.com/不可用。 –

+0

@VLS你不需要太多的代碼就可以做到。我已更新我的代碼，以便您可以將圖像置於另一個之下。你可以看看。 –

3

首先你需要改變#wrapper指定爲自動的寬度，以及內嵌改變圖像阻斷，所以基本上你的媒體屏幕的CSS應該是這樣的：

@media screen and (max-width: 480px) { 
    #wrapper { 
     height: auto; overflow: hidden; 
     width: auto; 
    } 
    .images { 
    display: block; 
    width:100%; 
    padding: 0; 
    } 
    #main-content {  
     float: none; 
     margin-right:0; 
     width:auto; 
    } 
    button.button { 
     width: 100%; 
     margin: 15px 0; 
    } 
    .img-row > a { 
     display: block; 
    } 
    .wp-caption-text { 
     /* this will center the title in the vertically*/ 
     top: 50%; 
     transform: translateY(-50%); 
     /*------------------------------------------*/ 
     padding: 0; 

    } 
}

PS

不要對多個元素使用相同的id，而是使用class來代替＃img-row到.img-row並刪除bottom：1x;從.wp字幕文本

Updated JSFIDDLE

來源

2017-02-21 07:35:00 Chiller

+0

完美的工作.. –

+0

只是一個關於按鈕的問題..爲什麼按鈕不能縮放？這在每行的第二個圖像上滾動。 – VLS

+0

，因爲寬度是固定的......你需要改變媒體屏幕和邊距的寬度....見我的編輯 – Chiller

1

嘗試使用最大寬度：100％， 和圖像排有兩個圖像，所以也許圖像需要是最大寬度： （< 50％）？

#wrapper { 
 
    margin: 0 auto; 
 
    max-width: 960px; 
 
} 
 
#main-content { 
 
    background: #fff; 
 
    padding: 7px 7px 7px 7px; 
 
    max-width: 946px; 
 
    min-height: 400px; 
 
    float: left; 
 
} 
 

 
.images { 
 
    vertical-align: middle; 
 
    padding: 0px 15px 15px 15px; 
 
    max-width: 45%; 
 
    margin: 10px 0; 
 
} 
 
#img-row { 
 
    display: block; 
 
    margin-top: -15px; 
 
    position: relative; 
 
    height: auto; 
 
    max-width: auto; 
 
    overflow-y: hidden; 
 
    overflow-x: auto; 
 
    word-wrap: normal; 
 
    white-space: nowrap; 
 
    text-align: center; 
 
} 
 
#img-row > a { 
 
    position: relative; 
 
} 
 
#img-row:after { 
 
    content: ""; 
 
    position: absolute; 
 
    display: block; 
 
    left: 0; 
 
    top: 0; 
 
    max-width: 100%; 
 
    height: 100%; 
 
    z-index: 1; 
 
} 
 
.button { 
 
    display: block; 
 
    background-color: #bbb; 
 
    margin: 10px; 
 
} 
 
button.button { 
 
    max-width: 570px; 
 
    margin-left: 182px; 
 
    height: 40px; 
 
    font-size: 30px; 
 
} 
 
.wp-caption-text { 
 
    display: block; 
 
    position: absolute; 
 
    width: 100%; 
 
    color: white; 
 
    left: 0; 
 
    top: -30px; 
 
    bottom: 1px; 
 
    padding: 5px; 
 
    font-weight: bolder; 
 
    z-index: 2; 
 
    font-size: 40px; 
 

 
}
<div id="wrapper"> 
 
    <div id="main-content"> 
 
    <div id="img-row" > 
 
     <a href=""><button class="button"> Ask \t </button> \t </a> 
 
    </div> 
 
    <div id="img-row"> 
 
     <a href=""><img src="http://assets.barcroftmedia.com.s3-website-eu-west-1.amazonaws.com/assets/images/recent-images-11.jpg" class="images" /><figcaption class="wp-caption-text">Title 1</figcaption></a> 
 
     <a href=""><img src="http://assets.barcroftmedia.com.s3-website-eu-west-1.amazonaws.com/assets/images/recent-images-11.jpg" class="images" /><figcaption class="wp-caption-text">Title 2</figcaption></a> 
 
    </div> 
 
    <div id="img-row"> 
 
     <a href=""> <img src="http://assets.barcroftmedia.com.s3-website-eu-west-1.amazonaws.com/assets/images/recent-images-11.jpg" class="images" /><figcaption class="wp-caption-text">Title 3</figcaption></a> 
 
     <a href=""> <img src="http://assets.barcroftmedia.com.s3-website-eu-west-1.amazonaws.com/assets/images/recent-images-11.jpg" class="images" /><figcaption class="wp-caption-text">Title 4</figcaption></a> 
 
    </div> 
 
    </div> 
 
</div>

來源

2017-02-21 08:02:13 GuaHsu

 相關問題

  • 暫無相關問題^_^