登录
首页 >  文章 >  前端

解决双列布局中右列高度与左列不等的正确方法是什么?

来源:php

时间:2024-11-03 20:21:58 432浏览 收藏

最近发现不少小伙伴都对文章很感兴趣,所以今天继续给大家介绍文章相关的知识,本文《解决双列布局中右列高度与左列不等的正确方法是什么?》主要内容涉及到等等知识点,希望能帮到你!当然如果阅读本文时存在不同想法,可以在评论中表达,但是请勿使用过激的措辞~

解决双列布局中右列高度与左列不等的正确方法是什么?

双列布局中右列高度与左列不等

下面的代码是双列布局 html 和 css 代码:

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>document</title>
  <style>
    .parent {
      display: flex;
      height: 200px;
      border: solid darkcyan 1px;
      overflow-y: auto;
    }

    .left {
      background: lightblue;
      height: 300px;
      width: 50%;
    }

    .right {
      width: 50%;
      background-color: lightcoral;
    }
  </style>
</head>

<body>
  <div class="parent">
    <div class="left"></div>
    <div class="right"></div>
  </div>
</body>

</html>

运行此代码后,会发现右列的高度与左列不相等。这个问题是如何解决的?

解决方案

要解决这个问题,可以将 .parent 的子元素包装在一个额外的 .box 容器中,如下所示:

<div class="parent">
  <div class="box">
    <div class="left"></div>
    <div class="right"></div>
  </div>
</div>

通过添加 .box 容器并在其中包裹 .left 和 .right 元素,可以使这两个元素的高度受 .box 容器内容的影响。由于 .box 容器没有指定高度,因此其高度将由其包含的子元素撑开,从而确保 .left 和 .right 的高度相等。

今天关于《解决双列布局中右列高度与左列不等的正确方法是什么?》的内容介绍就到此结束,如果有什么疑问或者建议,可以在golang学习网公众号下多多回复交流;文中若有不正之处,也希望回复留言以告知!

声明:本文转载于:php 如有侵犯,请联系study_golang@163.com删除
相关阅读
更多>
最新阅读
更多>
课程推荐
更多>