如何使图像旁边的显示文本：弯曲（响应）

Question

我接下来想手风琴但是我不知道我是否应该与VH或像素宽度设定值来放置图像。

第二个问题是;我使用“display：弯曲”，图像看起来正常旁边手风琴但是当我尽量减少它没有移动到下面的手风琴。能否请你告诉我哪里做错了？

HTML

<section id="section4">
    <div class="tabs">
        <input type="radio" name="tabs" id="tabone" checked="checked">
        <label for="tabone">Tab 1</label>
        <div class="tab">
            <h1>Tab 1</h1>
        </div>
        <input type="radio" name="tabs" id="tabtwo">
        <label for="tabtwo">Tab2</label>
        <div class="tab">
            <h1>Tab 2 </h1>
        </div>
    </div>
    <div class="grid"></div>
</section>

CSS

#section4 {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  padding: 30px;
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  width: 80vh;
}

.tabs label {
  order: 1;
  display: block;
  padding: 1rem 2rem;
  margin-right: 0.2rem;
  cursor: pointer;
  background: #fff;
  font-weight: bold;
  transition: background ease 0.2s;
}

.tabs .tab {
  order: 99;
  flex-grow: 1;
  width: 100%;
  display: none;
  padding: 1rem;
  background: #fff;
}

.tabs input[type="radio"] {
  display: none;
}

.tabs input[type="radio"]:checked + label {
  background: #ef4836;
}

.tabs input[type="radio"]:checked + label + .tab {
  display: block;
}

.grid {
  background: url("https://www.w3schools.com/w3images/lights.jpg") no-repeat
    center center;
  width: 70vh;
}

@media (max-width: 700px) {
  #section4 {
    flex-direction: column;
  }
}

Answer 1

因为你的形象是一个CSS DIV你需要设置的div height背景，否则将不显示。当这是其他元素旁边它的高度是由兄弟的高度计算的，但是当它被移到它下面不再知道它的高度，它消失！

.grid {
  background: url("https://www.w3schools.com/w3images/lights.jpg") no-repeat
    center center;
  width: 70vh;
  height: 100px; // <-- set height of the div to some value
}

Answer 2

我认为你需要让你的图像或DIV其增长或收缩

flex-grow: 1;

在你的CSS文件。