在两个垂直div旁边放置一个div

鲍勃·乔姆斯

我正在尝试在容器中设置一个高度为100%的div(高度为50%),然后在其旁边设置两个div,每个高度为50%。

这是我的意思的示例:

在此处输入图片说明

我还希望所有div之间都有一个边距,如上图所示。

到目前为止,这是我的代码:

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

一个儿子

像这样吗?

请注意,如果你需要支持旧的浏览器,这可以用做display: table以及

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>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

尝试在响应时在每个旁边放置一个 iframe 和一个 div

来自分类Dev

CSS 在另一个 div 旁边放置一个绝对 div(纯 CSS 弹出框)

来自分类Dev

Bootstrap在输入字段旁边放置两个glyphicons

来自分类Dev

让一个div垂直跨越两个div?

来自分类Dev

在两个div之间放置一个图标

来自分类Dev

如何在标题旁边放置一个按钮?

来自分类Dev

在图旁边放置一个部分

来自分类Dev

将两个DIV(包括其内容)垂直居中放置在另一个父DIV中

来自分类Dev

在图像旁边垂直对齐的两个div

来自分类Dev

html和css在两个固定的div之间放置一个非固定的div

来自分类Dev

将两个JLabel彼此叠置,并在其旁边放置JTextfields

来自分类Dev

如何在中心垂直对齐两个div,在底部保持一个div?

来自分类Dev

如何在中心垂直对齐两个div,在底部保持一个div?

来自分类Dev

引导程序:将一个div与另外两个相邻放置

来自分类Dev

并排放置两个div,一个用来拉伸以占据空间

来自分类Dev

使用“ display:flex”在包装的注释旁边放置一个头像

来自分类Dev

在现有元素旁边放置一个新元素

来自分类Dev

Highcharts:如何在第一个标记旁边放置Y轴标题?

来自分类Dev

我需要在XPages中的复选框旁边放置一个链接

来自分类Dev

将div放置在另一个div内,并在两个div之间保持间隔

来自分类Dev

在父div中垂直居中放置多个子元素(两个img和一个span)的CSS,并自动固定span中文本的字体大小

来自分类Dev

在HTML中的两个垂直div之间添加一个圆圈

来自分类Dev

在一个div内垂直传播两个图像

来自分类Dev

两个浮动div,一个文本为垂直

来自分类Dev

在文本中垂直放置一个浮动div

来自分类Dev

使一个div跨越两个相邻的div?

来自分类Dev

无法将嵌套的div放置在html css中的另一个div旁边

来自分类Dev

Bootstrap 4+-垂直+水平对齐另一个div内的两个div,高度设置为

来自分类Dev

如何将两个div垂直放置在最上面的div剩下的高度?

Related 相关文章

  1. 1

    尝试在响应时在每个旁边放置一个 iframe 和一个 div

  2. 2

    CSS 在另一个 div 旁边放置一个绝对 div(纯 CSS 弹出框)

  3. 3

    Bootstrap在输入字段旁边放置两个glyphicons

  4. 4

    让一个div垂直跨越两个div?

  5. 5

    在两个div之间放置一个图标

  6. 6

    如何在标题旁边放置一个按钮?

  7. 7

    在图旁边放置一个部分

  8. 8

    将两个DIV(包括其内容)垂直居中放置在另一个父DIV中

  9. 9

    在图像旁边垂直对齐的两个div

  10. 10

    html和css在两个固定的div之间放置一个非固定的div

  11. 11

    将两个JLabel彼此叠置,并在其旁边放置JTextfields

  12. 12

    如何在中心垂直对齐两个div,在底部保持一个div?

  13. 13

    如何在中心垂直对齐两个div,在底部保持一个div?

  14. 14

    引导程序:将一个div与另外两个相邻放置

  15. 15

    并排放置两个div,一个用来拉伸以占据空间

  16. 16

    使用“ display:flex”在包装的注释旁边放置一个头像

  17. 17

    在现有元素旁边放置一个新元素

  18. 18

    Highcharts:如何在第一个标记旁边放置Y轴标题?

  19. 19

    我需要在XPages中的复选框旁边放置一个链接

  20. 20

    将div放置在另一个div内,并在两个div之间保持间隔

  21. 21

    在父div中垂直居中放置多个子元素(两个img和一个span)的CSS,并自动固定span中文本的字体大小

  22. 22

    在HTML中的两个垂直div之间添加一个圆圈

  23. 23

    在一个div内垂直传播两个图像

  24. 24

    两个浮动div,一个文本为垂直

  25. 25

    在文本中垂直放置一个浮动div

  26. 26

    使一个div跨越两个相邻的div?

  27. 27

    无法将嵌套的div放置在html css中的另一个div旁边

  28. 28

    Bootstrap 4+-垂直+水平对齐另一个div内的两个div,高度设置为

  29. 29

    如何将两个div垂直放置在最上面的div剩下的高度?

热门标签

归档