问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

请教一个css的布局实现

头像
xiatianlong
    2.2k42954

    clipboard.png

    如图布局，A的高度固定了，再A的右边有BCD三块元素，要求css实现B块 靠上对齐，D块靠下对齐，C块自由发挥。

    纯css可以实现吗？

    csshtml
    阅读 2.4k
    3 个回答
    得票最新
    头像
    杨佰
      2.8k41223

      可以 flex布局

      <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Flex</title>
  <style type="text/css">
    .container,
    .div-others {
      display: flex;
    }
    .div-others {
      flex-direction: column;
      justify-content: space-between;
      margin-left: 10px;
    }
    .div-1 {
      background: #eee;
      width: 200px;
      height: 300px;
    }
    .div-2,
    .div-3,
    .div-4 {
      width: 200px;
      height: 30px;
      background: #999;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="div-1"></div>
    <div class="div-others">
      <div class="div-2"></div>
      <div class="div-3"></div>
      <div class="div-4"></div>
    </div>
  </div>
</body>
</html>
      头像
      July_EF
        23613861
        <html>
    <head>
        <title>测试代码</title>
    </head>
    <body>
        <div class="content">
            <div class="c-left">
                A
            </div>
            <div class="c-right">
                <div>
                    B
                </div>
                <div>
                    C
                </div>
                <div>
                    D
                </div>
            </div>
        </div>
    </body>
</html>
<style>
body{
    margin:50px;
  background-color:#fff;
}
.content{
    border: 1px solid #000;
    display: flex;
    justify-content: space-around;
    //align-items: center;
    height: 20rem;
    
}
.c-left {
    line-height: 20rem;
}

.c-right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

</style>
        头像
        LLLL
          598156583

          如果不用flex的话，可以用绝对定位

          <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>

    <style>
        .box {
            position: relative;
            width: 200px;
            border: 1px solid #000;
            padding: 15px;
        }
        .inner-box {
            border: 1px solid #000;
        }
        .right {
            position: absolute;
            right: 15px;
            width: 80px;
            height: 50px;
        }
        .A {
            width: 100px;
            height: 200px;
        }
        .B {
            top: 15px;
        }
        .C {
            top: 80px;
        }
        .D {
            bottom: 15px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="inner-box A">A</div>
        <div class="inner-box right B">B</div>
        <div class="inner-box right C">C</div>
        <div class="inner-box right D">D</div>
    </div>
</body>
</html>

          clipboard.png

          撰写回答
          你尚未登录，登录后可以
          • 和开发者交流问题的细节
          • 关注并接收问题和回答的更新提醒
          • 参与内容的编辑和改进，让解决方法与时俱进
          推荐问题