防止文本破坏柔性箱容器

Question

我正试图将图像与文本链接到柔性盒容器中。问题是它打碎了我的容器，在小屏幕上变成了下一步：

​

​

 <el-container>
    <el-main>
      <div class="top">
        <div class="download-compiler">
            <div class="dmd-download">
                <el-image src="http://dlang.ru/imgs/dmd_logo_128.png"></el-image>
                <el-link style="color: black; font-size: 1.3em;">DMD</el-link>
            </div>
        </div>
        <div class="code-snippets">
          <div class="code-snippets-header">
            Samples:
          </div>

          <div class="code-snippets-content"></div>          

        </div>
      </div>

      <div class="middle">
        <div class="main-app-img">
        </div>
      </div>

    </el-main>
</el-container>

这是最小的弹琴。https://jsfiddle.net/dhoc4zw5/

Answer 1

我不太清楚你想要实现什么，但是在你的“小提琴”中，从类height: 20%中删除.top使图像和文本始终保持在粉红色区域。