Question

我在这里失去了一些似乎非常简单的事情，但在玩了几个小时之后我觉得是时候寻求帮助了。

我需要的是一个容器（见粉红色），它以页面为中心，占页面宽度的70％。然后容器内应该有两个Div。

其中一个用于文本，另一个用于方形图像，应该保持固定大小（比方说200x200px - 我的意思是，看起来很奇怪最终在一个块的旁边有一个50x50px的头像缩小浏览器后的文本）。如果右侧Div移动到移动设备上的第一个Div之下，那就没关系了。

我在这里找不到有用的答案，但我一直在玩下面的代码（左边是相反的 - 小（图像）块），但出于某种原因，我可以不能让它发挥作用。

.wrapper {
  border: 2px solid #000;
  overflow: hidden;
}
.wrapper div {
  min-height: 200px;
  padding: 10px;
}
#one {
  background-color: gray;
  float: left;
  margin-right: 20px;
  width: 140px;
  border-right: 2px solid #000;
}
#two {
  background-color: white;
  overflow: hidden;
  margin: 10px;
  border: 2px dashed #ccc;
  min-height: 170px;
}
@media screen and (max-width: 400px) {
  #one {
    float: none;
    margin-right: 0;
    width: auto;
    border: 0;
    border-bottom: 2px solid #000;
  }
}

<div class="wrapper">
  <div id="one">one</div>
  <div id="two">two</div>
</div>

任何帮助都将受到高度赞赏！

Image with what I mean

Answer 1

您可以使用flexbox

.wrapper {
  display: flex;
  width: 70%;
  max-width: 1000px;    /* added this to limit its width on very wide screens  */
  margin: 0 auto;
  border: 2px solid #000;
  overflow: hidden;
}
.wrapper div {
  min-height: 200px;
  padding: 10px;
}
#one {
  flex: 1;
  background-color: gray;
  border-right: 2px solid #000;
}
#two {
  margin: 10px;
  border: 2px dashed #ccc;
  width: 200px;
}
@media screen and (max-width: 600px) {
  .wrapper {
    flex-direction: column;
  }
  #one {
    border-right: none;
  }
  #two {
    width: auto;
  }
}

<div class="wrapper">
  <div id="one">one</div>
  <div id="two">two</div>
</div>

宽屏幕的另一个选项是额外的media query

.wrapper {
  display: flex;
  width: 70%;
  margin: 0 auto;
  border: 2px solid #000;
  overflow: hidden;
}
.wrapper div {
  min-height: 200px;
  padding: 10px;
}
#one {
  flex: 1;
  background-color: gray;
  border-right: 2px solid #000;
}
#two {
  margin: 10px;
  border: 2px dashed #ccc;
  width: 200px;
}
@media screen and (max-width: 600px) {
  .wrapper {
    flex-direction: column;
  }
  #one {
    border-right: none;
  }
  #two {
    width: auto;
  }
}

@media screen and (min-width: 1200px) {
  .wrapper {
    width: 50%;
  }
}

<div class="wrapper">
  <div id="one">one</div>
  <div id="two">two</div>
</div>

中心容器左侧是文本，右侧是方形图像？

1 个答案: