Question

我想在手风琴旁边放置一个图像，但是我不知道是否应该用vh或pixel设置width的值。

第二个问题是；我使用“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你需要设置height的div或者它不会显示。当这是其他元素旁边它的高度是由兄弟的高度计算的，但是当它被移到它下面不再知道它的高度，它消失！

.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文件中。

如何使用display：flex（响应）使文本旁边的图像对齐

2 个答案: