html - 防止文本破坏 flexbox 容器

Question

我正在尝试将图像与指向 flexbox 容器的文本链接相匹配。它破坏了我的容器并且在小屏幕上看起来像下一个的问题：

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

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

标签： htmlcss

Answer 1

我不太确定你想要实现什么，但在你的 jsfiddle 中，只是height: 20%从类中删除.top会使图像和文本始终保持在粉红色区域。