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;是非常强大的属性，在占用剩余空间和居中时非常有用。

<强>修改
这是一个demo，我不建议使用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>

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

2 个答案: