將兩個div並排浮動（響應）

Question

如何使這個容器響應，所以文本和img自動成為塊元素。 我用flex方向試了一下，但是不管怎么說它不起作用。 如有必要，有人可以更正我的代碼，並建議我為響應式設計提供媒體查詢規則

<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

我想這就是你所追求的。 display: flex; 是非常強大的屬性，並且在占用剩余空間和居中時非常有用。

修改
這是一個演示 ，我不建議使用max-width這種方法，因為它不是“移動優先”。 但如果這是你想要的這個項目，那么好吧。

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

Answer 2

好吧，好吧，如果我很清楚你想要完成的是什么。 如果我錯了，請糾正我或更新你的問題！

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