将一个 div 放在两个垂直 div 旁边 [英] Put one div next to two vertical divs

查看：26
本文介绍了将一个 div 放在两个垂直 div 旁边的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试创建一个 div，其容器中的高度为 100%(高度为 50%)，旁边有两个 div，每个高度为 50%.

这是我的意思的一个例子:

我还想在所有 div 之间留一个边距，如上图所示.

这是我目前的代码:

 <div style="height: 50%;"><div style="height: 100%; float: left; margin-right: 15px;"><p>内容</p>

<div style="float: right; height: 50%;"><p>内容</p>

<div style="float: right; height: 50%;"><p>内容</p>

JsFiddle:https://jsfiddle.net/ne4njtvr/

解决方案

可能是这样?

注意，如果您需要支持旧浏览器，也可以使用display: table

html, body {边距:0；高度:100%；}.包装{显示:弹性；高度:100%；}.wrapper .left,.wrapper .right {弹性:1；显示:弹性；弹性方向:列；}.wrapper .right div {弹性:1；}.wrapper .right div ~ div {弹性:2；}div {边框:1px 实心；box-sizing: 边框框；}

<div class="left">剩下
<div class="right"><div>右 - 顶部

<div>右 - 底部

I'm trying to have one div, with a height of 100% in it's container (which has a height of 50%) and two divs next to that, which each have a height of 50%.

Here's an example of what I mean:

I would also like to have a margin between all the divs, as shown in the picture above.

Here's my code so far:

 <div style="height: 50%;">
    
<div style="height: 100%; float: left; margin-right: 15px;">
<p>Content</p>
</div>
    
<div style="float: right; height: 50%;">
<p>Content</p>
</div>
    
<div style="float: right; height: 50%;">
<p>Content</p>
</div>
    
</div>

JsFiddle: https://jsfiddle.net/ne4njtvr/

解决方案

Like this maybe?

Note, if you need to support older browsers, this can be done using display: table as well

html, body {
  margin: 0;
  height: 100%;
}
.wrapper {
  display: flex;
  height: 100%;
}
.wrapper .left,
.wrapper .right  {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.wrapper .right div  {
  flex: 1;
}
.wrapper .right div ~ div  {
  flex: 2;
}
div {
  border: 1px solid;
  box-sizing: border-box;
}

<div class="wrapper">
  <div class="left">
    Left
  </div>
  <div class="right">
    <div>
      Right - Top
    </div>
    <div>
      Right - Bottom
    </div>
  </div>
</div>

这篇关于将一个 div 放在两个垂直 div 旁边的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆