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>

现在回答我的问题，我想实现网页以使用跨度的第一列和最后一列。所以，在常规分辨率屏幕上，我希望图片在最左边，文字在最右边。

在只有 2 列的较小屏幕上，我希望它们彼此相邻，而在更小的屏幕上，我希望它们彼此下方。

有什么建议吗？

编辑：

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;
}

HTML/CSS 响应式网格

HTML/CSS Responsive Grid

html

css

responsive