居中容器，左边是文本，右边是方形图像？

Question

我在这里因为一些看似非常简单的事情而失去了理智，但在玩了几个小时之后，我认为是时候寻求帮助了。

我需要的是一个位于页面中央且占页面宽度 70% 的容器（见粉红色）。那么容器里面应该有两个Div。

左边一个用于文本，右边一个用于应保持固定大小的方形图像（假设为 200x200px - 我的意思是，最终在缩小浏览器后的文本块）。如果右边的 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>

居中容器，左边是文本，右边是方形图像？

Centered container with text on the left and squared image on the right?

html

css

alignment

responsive