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

Question

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

我需要的是一个位于页面中央且占页面宽度 70% 的容器(见粉红色)。然后容器内应该有两个 Div。

左边一个用于文本，右边一个用于应保持固定大小的方形图像(假设为 200x200px - 我的意思是，最终在一 block 图片旁边放置一个 50x50px 的头像看起来很奇怪缩小浏览器后的文本)。如果右侧 Div 在移动设备上移动到第一个 Div 以下，则没有关系。

我无法在这里找到有用的答案，但我一直在研究下面的代码(它的作用相反 - 左侧的小(图像) block )但出于某种原因我只能'让它开始工作。

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

宽屏的另一种选择是额外的媒体查询

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