72上下两行布局

最新推荐文章于 2022-09-21 17:47:23 发布
最新推荐文章于 2022-09-21 17:47:23 发布
阅读量181 收藏
点赞数
原文链接：http://www.cnblogs.com/gushixianqiancheng/p/10967029.html
版权 
1、上下两行布局=>正好占满全屏=>方法一:用calc。内容超长，会出现滚动条，不会超屏。
```html:run
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        html, body {
            height: 100%;
        }

        .nav {
            height: 50px;
            background: #BBE8F2;
            width: 100%;
        }

        .body {
            height: calc(100% - 60px);
            background: #D9C666;
            margin-top: 10px;
            font-size: 0;
        }

        .inline {
            display: inline-block;
        }

        .left {
            width: 200px;
            height: 100%;
            overflow: auto;
            background: palevioletred;
            margin-right: 10px;
            font-size: 16px;
        }

        .right {
            width: calc(100% - 210px);
            height: 100%;
            overflow: auto;
            background: rebeccapurple;
            font-size: 16px;
        }
    </style>
</head>
<body>
<div class="nav"></div>
<div class="body">
    <div class="inline left">
    </div>
    <div class="inline right">
    </div>
</div>
</body>
</html>
```

2、上下两行布局=>正好占满全屏=>方法二:用flex。内容超长，不会出现滚动条，会超屏。
```html:run
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        html, body {
            height: 100%;
        }

        .full {
            display: flex;
            flex-direction: column;
        }

        .nav {
            height: 50px;
            background: #BBE8F2;
            width: 100%;
        }

        .body {
            flex: 1;
            background: #D9C666;
            font-size: 0;
        }

        .inline {
            display: inline-block;
        }

        .left {
            width: 200px;
            height: 100%;
            overflow: auto;
            background: rebeccapurple;
            font-size: 16px;
            margin-right: 10px;
        }

        .right {
            width: calc(100% - 210px);
            height: 100%;
            overflow: auto;
            background: rebeccapurple;
            font-size: 16px;
        }
    </style>
</head>
<body class="full">
<div class="nav"></div>
<div class="body">
    <div class="inline left">
    </div>
    <div class="inline right">
    </div>
</div>
</body>
</html>
```
3、上下两行布局=>下行用最小高度=>方法一:用min-height。内容超长，会出现滚动条，不会超屏。
```html:run
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>最小高度</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .nav {
            height: 50px;
            background: #BBE8F2;
        }
        .body {
            min-height: 500px;
            background: #D9C666;
        }
        p{
            height:100px;
        }
    </style>
</head>
<body>
<div class="nav"></div>
<div class="body"></div>
</body>
</html>
```
4、上下两行布局=>总高度不变，此增彼减=>方法一:用flex。内容超长，不会出现滚动条，会超屏。
```html:run
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .full {
            height: 600px;
            background: red;
            display: flex;
            flex-direction: column;
        }
        .up {
            background: blue;
        }
        .down {
            background: green;
            flex: 1; /*height:100%;*/ 
        }
    </style>
</head>
<body>
<div class="full">
    <div class="up">
        <p>ABCD</p>
    </div>
    <div class="down">
        <p>DCBA</p>
    </div>
</div>
</body>
</html>
```

转载于:https://www.cnblogs.com/gushixianqiancheng/p/10967029.html

yuxiaoyu.
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
DIV＋CSS＋HTML布局（三行两列布局）
05-17
DIV＋CSS＋HTML布局（三行两列布局）
Css布局系列-上下两栏应用场景
weixin_34411563的博客
03-03 164
今天讲讲上下两栏布局的应用场景，在此之前稍微提一下box-sizing这个属性。该属性有三个值分别为content-box|border-box|inherit。 box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。 通常我们设置的高宽度其实是指内容的高宽度，是没有将边框的高宽度算在内的。如果设置box-sizing：content-box就是只包含盒子内容的高宽度，边框的...
css上下布局铺满屏幕
小牛牛的博客
03-07 2753
&lt;div id="c_main"&gt; &lt;div id="nav"&gt;&lt;/div&gt; &lt;div id="content"&gt; &lt;div class="con_left"&gt;&lt;/div&gt; &lt;div class=&qu
【CSS】使用Flex做两行或两列布局
了解—学习—进步—满足
07-27 1万+
【CSS】使用Flex做两行或两列布局
解决 flex布局之 flex-wrap:wrap 自动换行属性，导致上下两行div中间有空行的问题
U_Are_My_Halo的博客
09-21 3945
解决flex自动换行属性 中间有空行的问题
让图片img标签在div里上下左右居中的方法
09-25
1. **使用 Flexbox 布局**：Flexbox 是一种现代的布局模式，适用于一维布局，如行或列。要使图片居中，我们可以设置以下CSS样式： ```css #container { display: flex; justify-content: center; /* 水平居中 */ ...
一些常用的DIV+CSS的网页布局所用的代码段
09-25
在这种布局中，页面分为上下两个部分，每个部分都是一个单独的`div`。`#content-top`和`#content-end`都使用相同的样式，居中并设定宽度。 ```css body { margin: 0px; padding: 0px; text-align: center; } #...
通过上下左右键和回车键切换光标实现代码
09-05
需要注意的是，这段代码假设了GridView的结构是稳定的，每个行都有相同数量的文本框，并且上下箭头会跨行移动光标。在实际应用中，可能需要根据具体布局进行调整，确保代码能正确处理各种边界情况。 最后，虽然示例...
关于css 行元素和块元素 相互转换 居中
09-24
在CSS布局中，行元素和块元素是两种基本的元素类型，它们的特性和转换方法对网页设计至关重要。本文将详细介绍这两种元素的概念、特点以及如何实现居中对齐。 首先，块级元素如`div`、`h1`或`p`等，它们在页面布局...
DIV+CSS网页设计常用布局代码.pdf
10-04
两行一列布局则将页面分为上下两个区域，`#content-top`和`#content-end`各自占据一行，同样通过自动左右外边距实现居中。这种布局常用于有顶部导航或头部信息，底部为主要内容的页面。 三行一列布局进一步扩展了...
解决：flex布局之 flex-wrap:wrap 自动换行属性，导致上下两行div中间有空行
Sfh的博客
07-08 1万+
直接上问题，如图所示: 我们在对父容器设置 flex-wrap:wrap 之后，容器内的容器成员在换行时中间出现了一个空行，这是因为我们忘记对容器设置align-content属性，在我们对外层容器加入align-content：flex-start之后，这个问题就解决了，效果及代码如下所示： .parent { display: flex; align-content: flex-start; flex-wrap: wrap; width: 200px; heig
HTML学习之Flex 布局
weixin_30918415的博客
08-01 263
一、Flex 布局是什么？ Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex 布局。 .box{ display: flex; } 行内元素也可以使用 Flex 布局。 .box{ display: inline-flex; } Webkit ...
html把div分成两栏,div+css制作上中下，中间两列的全屏自适应布局
weixin_42352842的博客
06-16 1318
制作自适应布局的网页对初学者是个难点，今天我们以最常见的上中下结构，中间又分为两列的全屏自适应布局为例，教大家如何制作自适应布局网页。上中下结构，中间又分为两列的全屏自适应布局HTML代码：上中下结构，中间又分为两列的全屏自适应布局/* 全屏自适应布局 */html,body{width:100%;height:100%;overflow:hidden;margin:0;}html{_heigh...
实现全屏布局的 3 种方式
一碗周
01-03 1208
写在前面 对 CSS 布局掌握程度决定你在 Web 开发中的开发页面速度。随着 Web 技术的不断革新，实现各种布局的方式已经多得数不胜数了。 最近利用碎片时间，大概用了半个月的时间整理了一个系列，本系列文章总结了 CSS 中的各种布局，以及实现方式及其常用技巧。让你通过该系列文章对 CSS 布局有一个新的认识。 该系列的导航帖点我进入，里面可以快速跳转到你想了解的文章(建议收藏) 全屏布局概述 全屏布局主要应用在后台，主要效果如下所示： 实现全屏布局的 3 种方式 在开始今天的文章之前，我们先把今天的主
flex布局 just-content:space-between，列表上下两排数量不一致的时候处理方法
Buddha_ITXiong的博客
08-08 1万+
我们在做项目的时候，经常会遇到列表数据展示的需求，如下图： 看到这种需求就想到用flex布局方法会很方便： 然而··········这样写的话并不会像第一张图片那样展示，第二排的三个数据会平分整个宽度，   思路：所有我采用的方法就是改变原始数据，添加占位容器即添加多余的li元素   我用的是vue，其他框架可以借鉴思维，这是处理原始数据的方法 这是html数据的绑定 ...
html上下两个div布局,常见上下两列div+css布局技巧整理【转载】
weixin_42129300的博客
06-10 5928
在百度搜索‘左右布局’，发现好多朋友在问这个问题，特将上周学到的左右布局技巧整理分享给大家：)常见的左右两列div+css布局分为以下两种：一、左右定宽布局：在css分别指定了左右两列的宽度的情况下，只需要将左边的div 向左浮动{float:left;}，右边的div 向右浮动{float:right;}，并清除浮动，即可实现。常用的清除浮动有两种方式：a、通过在浮动元素的父级元素上添加清除浮动...
两行布局一行固定高度一行自适应满屏
lqc851011的专栏
07-13 3420
<br /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /><meta http-equiv="Content-Type" content="text/html; charset=ut
HTML中table标签的跨多行和多列布局方法
热门推荐
weixin_37861326的博客
06-25 3万+
先放一张布局效果效果图在实现这一布局效果时，主要应用了rowspan、colspan跨行和跨列的属性布局。在所跨的行或者列，在其他行或者列中也是占位的。比如：第一项项目基本信息是跨过5行，因此在接下来的4行中，第一列已经是默认被占了，行中的td列是从第二列开始布局；最后一行，项目得分占据6列，因此第二个td实际对应的是该行的第七列。具体实现代码如下：HTML布局代码：&lt;!-- 明细表 --&...
DataGear 制作自适应任意屏幕尺寸的数据可视化看板
datagear的博客
02-28 1633
    DataGear 在2.12版本新增了看板可视编辑模式，并在2.13版本进行了大幅改进和增强，使系统即支持以编写HTML、JavaScript、CSS源码的方式制作看板，同时支持以交互式、直观可见、友好快捷的方式制作看板。 本文将通过看板可视编辑模式提供的网格布局和样式设置功能，介绍如何制作自适应大屏、PC、平板、手机等任意屏幕尺寸的数据可视化看板。 首先，点击看板管理页面的【添加】-【添加（新窗口）】按钮，新建一个空白看板，并切换至【可视模式】，如
两个div盒子上下两行布局
最新发布
05-25
可以使用以下CSS样式实现两个div盒子上下两行布局： HTML代码： ``` 内容1 内容2 ``` CSS代码： ``` .container { display: flex; flex-direction: column; align-items: center; } .box1, .box2 { ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值