響應造型：使用移動文本框下方IMG（利潤率）所有的

Question

首先@media標籤，這裏的jsfiddle有問題的特殊標記/造型。

主要問題是，爲什麼IMG和文本框（dark_block）不具有相同的幅度。兩者都設置爲容器div的100％寬度，所以我不確定發生了什麼。介意看看？

其他的事情我還在試圖找出和谷歌搜索（迄今）並沒有幫助我：

• 當文本框是線（向左）照片的容器，如何如果圖像的寬度小於圖片容器，我該如何獲得與圖片容器相同的高度
• 如果圖片的寬度小於圖片容器，我該如何讓它水平和垂直居中？
• 爲了可訪問性，我可以在@media標籤之前創建一個無響應的css版本嗎？

對不起，我是一個新的web開發，任何幫助肯定會被讚賞。此外，如果代碼片段中的任何內容看起來非常糟糕，請打電話給我！除了解決手頭問題之外，我還想學習一些最佳實踐。尤其是顯示器類型，我很難將它們包裹在他們的周圍。

感謝您花時間看看這個！

約翰

CODE：

<div id="home_top_container"> 
    <div id="photo_slider"> 
     <img src="redacted"> 
    </div> 
    <div id="dark_block"></div> 
</div> 

#home_top_contianer { 
    width: 100%; 
    margin-left: 10px; 
    margin-right: 10px; 
    margin-bottom: 20px; 
} 
@media screen and (min-width: 800px){ 
    #photo_slider{ 
     float:right; 
     background-color: #cccccc; 
     padding: 0px; 
     width: 69%; 
     min-width: 500px; 
     display: inline-block; 
    } 
} 

@media screen and (max-width: 799px){ 
    #photo_slider{ 
     float:none; 
     background-color: #cccccc; 
     padding: 0px; 
     width: 100%; 
     min-width: 500px; 
     display: inline-block; 
    } 
} 
@media screen and (min-width: 800px){ 
    #dark_block { 
     float:left; 
     background-color: #383838; 
     padding: 10px; 
     width: 28%; 
     display: inline-block; 
    } 
} 
@media screen and (max-width: 799px){ 
    #dark_block { 
     float:left; 
     background-color: #383838; 
     margin-top: 20px; 
     padding: 10px; 
     width: 100%; 
     min-height: 200px; 
     display: inline-block; 
    } 
} 

img { 
    max-width: 100%; 
    margin: 0px; 
} 

Answer 1

您需要在CSS box model讀了。元素的width指其內容。填充，邊框和邊距然後添加到它。這意味着您的#dark_block實際上是100% + 2*10px寬。

適當的解決方案是將#dark_block設置爲display: block並刪除float和width。 width的默認值爲auto，這會自動使塊儘可能寬而不會溢出。網站開發中的經驗法則：如果你給display: block元素width: 100%，那麼你做錯了什麼。

另一種簡單的解決辦法是設置#dark_blockbox-sizing: border-box;，但是box-sizing是一個相對較新的屬性，因此，如果您需要支持舊的瀏覽器將無法正常工作。

---

讓他們到相同的高度，不是一件小事。你可以使用display: table-* properties，並給他們height: 100%但這需要你先把#dark_block放在HTML中。

Quick example：

<div id="home_top_container"> 
    <div> 
    <div id="dark_block"></div> 
    <div id="photo_slider"> 
     <img src="http://caldwellfellows.ncsu.edu/wp/wp-content/uploads/2013/06/Justin-sews.jpg"> 
    </div> 
    </div> 
</div> 

#home_top_container > div > div { 
    display: table-cell; 
    width: 50%; 
    border: 1px solid red; 
} 

img { 
    width: 100%; 
} 

---

再次垂直居中不是CSS一件小事。你最好的選擇是使用display: table-cell和vertical-align: middle。

---

當然是。尤其是，您應該將所有媒體變體的所有屬性移到媒體規則之外，以免重複。

此外，不需要圍繞每個規則重複媒體規則。只有一個媒體規則：

@media screen and (min-width: 800px) { 
    #photo_slider { 
     /* ... */ 
    } 
    #dark_block { 
     /* ... */ 
    } 
} 
@media screen and (max-width: 799px) { 
    #photo_slider { 
     /* ... */ 
    } 
    #dark_block { 
     /* ... */ 
    } 
}