将两个 div 并排对齐并浮动（响应）

Question

我怎样才能使这个容器响应，以便文本和 img 自动成为块元素。我用 flex direction 尝试了一下，但不知何故它不起作用。如有必要，有人可以更正我的代码并向我建议响应式设计的媒体查询规则吗

<div class="top">
    <h1>Welcome</h1>
    <div class="portrait">
       <img src="https://pixy.org/images/placeholder.png" alt="">
       <h2>XXXXXXXXXX</h2>
    </div>
</div>

.top h1{
   display: flex;
   align-items: center;
   justify-content: center;
   flex-grow: 1;
   background-color: black;
   height: 20vw;
   margin-top: 0;
   font-size: 5vw;
   color: white;
   text-shadow: 5px 5px rgb(142, 135, 136);
}

.top img {
   width: 20vw;
}

提前致谢

Answer 1

好的，如果我很了解您要完成的任务，那么就到这里吧。如果我错了，请纠正我或更新您的问题！

#img{
  width: 200px;
  height: 150px;
  float: left;
}
#text{
  overflow: hidden;
}

<div class="container">
    <img id="img" src="https://www.archlinux.org/static/vector_tux.864e6cdcc23e.png"/>
    <div id="text">text on the left, next to the img</div>
    
</div>

Answer 2

我想这就是你想要的。 display: flex; 非常强大属性并且在占用剩余 space 和居中时很有用。

修改
这是一个 demo，我不建议使用 max-width 这种方法，因为它不是 "mobile-first"。但如果这就是你想要的这个项目，那么没问题。

.container {
  display: flex;
  flex-direction: row;
  background-color: deepskyblue;
}

#img {
  width: 140px;
  height: 140px;
}

#text {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-grow: 1;
  background-color: deeppink;
  min-height: 100px;
}

@media screen and (max-width: 700px) {
  .container {
    flex-direction: column;
  } 

  #img {
    width: 100%;
    height: auto;
  }
}

.container {
  display: flex;
  background-color: deepskyblue;
}

#img {
  width: 140px;
  height: 140px;
}

#text {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-grow: 1;
  background-color: deeppink;
}

<div class="container">
  <img id="img" src="https://www.archlinux.org/static/vector_tux.864e6cdcc23e.png" />
  <div id="text">text on the left, next to the img</div>
</div>

将两个 div 并排对齐并浮动（响应）

align two divs side by side with floating (responsive)

html

css

responsive