堆疊在移動設備上的水平框 - 以圖像，標題文本和詳細文本爲中心

Question

難以概念化如何去製作這組框。他們需要水平和居中，但堆疊在更小的屏幕上。還需要將圖像和兩種類型的文本居中。欣賞你的想法！

我有什麼至今： 需要先從主容器和保持它內部的所有4盒。不知道如何在較小的屏幕上獲得水平顯示或堆疊功能。還不確定如何將每個框中的內容居中 - 不確定是否應在框中使用靜態或動態格式。

Answer 1

如果你不想沿着自舉（或其他網格佈局）路線走，我建議使用flex和媒體查詢。

HTML：

<div class="wrapper"> 
    <div class="box"> 
    <div class="image">Image</div> 
    <h1>Title Text</h1> 
    <div>detailed text that explains what the title means</div> 
    </div> 

    <div class="box"> 
    <div class="image">Image</div> 
    <h1>Title Text</h1> 
    <div>detailed text that explains what the title means</div> 
    </div> 

    <div class="box"> 
    <div class="image">Image</div> 
    <h1>Title Text</h1> 
    <div>detailed text that explains what the title means</div> 
    </div> 

    <div class="box"> 
    <div class="image">Image</div> 
    <h1>Title Text</h1> 
    <div>detailed text that explains what the title means</div> 
    </div> 
</div> 

CSS：

.wrapper { 
    display: flex; 
    flex-direction: column; 
} 

.box { 
    width: 100%; 
    padding: 10px; 
    text-align: center; 
    border: 1px solid black; 
} 

.image { 
    display: inline-block; 
    background: black; 
    color: white; 
    padding: 10px; 
} 

@media (min-width: 600px) { 
    .wrapper { 
    flex-direction: row; 
    } 

    .box { 
    width: auto; 
    flex-grow: 1; 
    } 

} 

https://codepen.io/anon/pen/GvMPQe

Answer 2

結賬bootstrap。它是一個響應式插件，用於許多網站，包括Twitter。強烈推薦並且非常適合設計多平臺網站。