带有图像的响应式 4 到 2 列网站

Question

我正在尝试制作宽度超过 1000 像素时有 4 列的响应式网站，如果宽度小于 1000 像素则有 2 列。

![][1]

在图像上，您可以看到显示超过 1000 像素时 (1) 的外观。 (2) 将浏览器宽度减小到 1000px 以下后应该是什么样子。并且 (3) 显示了当我添加图片时它是如何搞砸的。

#stred {
  width: 90%;
  margin: 0 auto;
}
#img {
  width: 80%;
}
#center {
  text-align: center;
}
#container1 {
  float: left;
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  overflow: auto;
}
#col1 {
  float: left;
  width: 25%;
  background: red;
  padding: 20px;
  box-sizing: border-box;
}
#col2 {
  float: left;
  width: 25%;
  background: yellow;
  padding: 20px;
  box-sizing: border-box;
}
#col3 {
  float: left;
  width: 25%;
  background: green;
  padding: 20px;
  box-sizing: border-box;
}
#col4 {
  float: left;
  width: 25%;
  background: blue;
  padding: 20px;
  box-sizing: border-box;
}
@media screen and (max-width: 500px) {
  #stred {
    width: 100%;
  }
  #container1 {
    float: left;
    width: 100%;
    overflow: auto;
    height: auto;
  }
  #col1 {
    float: left;
    width: 50%;
    background: red;
  }
  #col2 {
    float: left;
    width: 50%;
    background: yellow;
  }
  #col3 {
    float: left;
    width: 50%;
    background: green;
  }
  #col4 {
    float: left;
    width: 50%;
    background: blue;
  }
}

<div id="container1">
  <div id="col1">
    <p id="center">Column 1</p>
    <div id="img"></div>
  </div>
  <div id="col2">
    <p id="center">Column 2</p>
    <br>text</div>
  <div id="col3">
    <p id="center">Column 3</p>
  </div>
  <div id="col4">
    <p id="center">Column 4</p>
  </div>
</div>

仅使用 HTML 和 CSS 时，是否可以在图像的第二部分显示带有图像的列？如果可以，怎么做？

Answer 1

一种简单的方法是使用 flex 和 min-width 或媒体查询。

最小宽度为 250px 的示例，每 250px 给出一个断点。

#container1 {
  display: flex;
  flex-wrap: wrap;
}
#container1 > div {
  min-width: 250px;
  flex: 1;
}
#container1 > div img {
  max-width: 100%;
}
#col1 {
  background: red;
}
#col2 {
  background: yellow;
}
#col3 {
  background: green;
}
#col4 {
  background: blue;
}

<div id="container1">
  <div id="col1">
    <p id="center1">Column 1</p>
    <img src="http://dummyimage.com/400x150" />
  </div>
  <div id="col2">
    <p id="center2">Column 2</p>
    <br>text</div>
  <div id="col3">
    <p id="center3">Column 3</p>
  </div>
  <div id="col4">
    <p id="center4">Column 4</p>
  </div>
</div>`

mediaquerie 示例：仅 1 个断点

#container1 {
  display: flex;
  flex-wrap: wrap;
}
#container1 > div {
  width:25%;
}
@media screen and (max-width: 500px) {
  #container1 > div {
  width:50%;
}
  }
#container1 > div img {
  max-width: 100%;
}
#col1 {
  background: red;
}
#col2 {
  background: yellow;
}
#col3 {
  background: green;
}
#col4 {
  background: blue;
}

<div id="container1">
  <div id="col1">
    <p id="center1">Column 1</p>
    <img src="http://dummyimage.com/400x150" />
  </div>
  <div id="col2">
    <p id="center2">Column 2</p>
    <br>text</div>
  <div id="col3">
    <p id="center3">Column 3</p>
  </div>
  <div id="col4">
    <p id="center4">Column 4</p>
  </div>
</div>`

Answer 2

Fiddle GCyrillus 为您提供了 flex box，我也更喜欢它。它使对齐块并给它们 space 变得非常容易。关于媒体，您可以在此处查看 fiddle 以了解其工作原理。

@media screen and (max-width:1000px){
  div{
    width: calc(50% - 10px);
  }
}

带有图像的响应式 4 到 2 列网站

Responsive 4 to 2 column website with images

html

css

image

multiple-columns

responsive-design