Question

嗨，团队，

基本上，我并不擅长让divs并排排列并且与旁边的高度相同（例如下面的例子）。

desired outcome

我想知道是否有人可以帮我编码。我已将区域B和C放在他们自己的div中并且响应很好但是我在将它与图片中的区域A对齐时遇到了问题。在将来移动屏幕的分辨率时，这将是一个问题。

我目前正在使用HTML和CSS来实现这一结果。此外，这些区域没有连接的间隙 - 为了清晰起见，仅在问题图片中。

此致

劳拉

Answer 1

它有点先进，但你可以使用CSS网格布局。假设每个区域都有一个类，这就是CSS。

.container {
  display: grid;
  grid-template-columns: 1fr 3fr; /* right col 3* larger than left col */
  grid-template-rows: auto;
  grid-template-areas:
    "area-b area-a"
    "area-c area-a";
}

.area-a {
  grid-area: area-a;
} 

.area-b {
  grid-area: area-b;
} 

.area-c {
  grid-area: area-c;
}

兼容性非常好：http://caniuse.com/css-grid/embed

Answer 2

以下可能是最简单的方法：

＆＃13;

* {
  box-sizing: border-box;
}

body {
  overflow: hidden;
}

.area {
  position: absolute;
}

.a {
  top: 0;
  right: 0;
  width: 75vw;
  height: 100vh;
  background: red;
}

.b {
  top: 0;
  left: 0;
  width: 25vw;
  height: 50vh;
  background: green;
}

.c {
  bottom: 0;
  left: 0;
  width: 25vw;
  height: 50vh;
  background: blue;
}

＆＃13;

<div class="area a">A</div>
<div class="area b">B</div>
<div class="area c">C</div>

＆＃13;

Answer 3

试试这段代码：

<html>

    <head>  
    <style>
    .left-section{float:left; width:25%;}
    .right-section{float:left; width:75%;}
    .area-left{width:100%; height:50%; background:#e5e5e5; border:2px solid #000;}
    .area-right{border:2px solid #000; width:100%; height:100%; background:#e5e5e5;}
    </style>
    </head>

    <body>
    <div class="left-section">
        <div class="area-left">
            <span>Area B</span>
        </div>
        <div class="area-left">
            <span>Area C</span>
        </div>
    </div>
    <div class="right-section">
        <div class="area-right">
            <span>Area A</span>
        </div>
    </div>
    </body>
    </html>

定位div

3 个答案: