Question

我试图在宽度超过1000px的情况下制作具有4列的响应式网站，如果低于1000px，则使用2列。

！[] [1]

在图像上，当显示超过1000px时，您可以看到它的外观（1）。（2）在1000px下减少浏览器宽度后应该如何显示。并且（3）显示了添加图片时它是如何搞砸的。

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

Futures

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

Answer 1

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

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

＆＃13;

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

＆＃13;

<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>`

＆＃13;

mediaquerie的例子：仅1个断点

＆＃13;

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

＆＃13;

<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>`

＆＃13;

Answer 2

Fiddle GCyrillus为您提供柔性盒，我也更喜欢。它使得aline块非常容易并且给它们留出空间。关于媒体，您可以在这里检查小提琴，看看它是如何工作的。

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

响应4至2列网站的图像

2 个答案: