HTML / CSS響應式網格

Question

我對HTML / CSS中的響應式網格概念很陌生。 我正在嘗試使用此概念來設計網頁。 對於標題，我有圖片和一些文本。

<header class="section group">
    <div class="section group">
        <div class="picture col span_1_of_4">
            <a href="index.html"><img class="headimg" alt="shoo" src="shoo.png"></a>
        </div>
        <div class="header-text col span_1_of_4">
                        <p>Hi and welcome to the Tasty Recipies website!</p>
        </div>
    </div>
</header>

現在我的問題是，我想實現網頁以使用跨度的第一列和最后一列。 因此，在常規分辨率的屏幕上，我希望圖片位於最左側，文本位於最右側。

在只適合兩列的較小屏幕上，我希望它們彼此相鄰，而在較小屏幕上，我希望它們彼此相鄰。

有什么建議么？

編輯：

div.picture{
    background-color: #4A96AD;
    float: left;
    height:100%;
    border-right:3px solid #7D1935;
}

/*CSS FILE*/
div.header-text{
    font-weight:bold;
    text-align:right;
}

Answer 1

處理3個模擬尺寸的示例：

 div.picture{ background-color: #4A96AD; float: left; height:100%; border-right:3px solid #7D1935; width: 40px; } div.header-text{ font-weight:bold; text-align:right; width: 40px; } .float-right{ float: right; } .float-left{ float: left; } div.section{ clear: both; } /* don't copy this css, just examples*/ div.section:nth-of-type(1){ width: 400px; margin: 0 auto; } div.section:nth-of-type(2){ width: 90px; margin: 0 auto; } div.section:nth-of-type(3){ width: 50px; margin: 0 auto; } 

 <header class="section group"> <div class="section group"> <div class="picture col span_1_of_4 float-left"> div1 </div> <div class="header-text col span_1_of_4 float-right"> div2 </div> </div> <div class="section group"> <div class="picture col span_1_of_4 float-left"> div1 </div> <div class="header-text col span_1_of_4 float-right"> div2 </div> </div> <div class="section group"> <div class="picture col span_1_of_4 float-left"> div1 </div> <div class="header-text col span_1_of_4 float-right"> div2 </div> </div> </header> 

對於最小的那個，如果您不喜歡這種效果，我會使用中介查詢。

Answer 2

將您的代碼放在SO上，浮動效果很好：

https://jsfiddle.net/zkzjsgxr/1/

div.picture{
    background-color: #4A96AD;
    float: left;
    height:100%;
    border-right:3px solid #7D1935;
}

/*CSS FILE*/
div.header-text{
    font-weight:bold;
    float:right;
}