<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用display制作自动适应的两栏布局</title>
</head>
<body>
<style type="text/css">
div {
border: 1px solid red;
}
.left {
float: left;
width: 200px;
}
.right {
width: 2000px;
display: table-cell;
}
</style>
<div class="left">left</div>
<div class="right">right</div>
</body>
</html>
效果如下：
使用display制作自动适应的两栏布局
效果如下：
两栏布局 左边固定右边自适应 使用float布局 使用position布局 三栏布局 左右两边固定中间自适应...
1、关于display:flex 多栏多列布局 小程序中推荐使用display:flex多栏布局，来简化页面布局 ...
布局简介、display(水平居中、居中导航)、position(轮播头图、固定顶栏、遮罩、三行自适应布局)、fl...
这种布局比较常见，一般情况下，宽度固定区域放置侧边栏，而自适应区域放置主体内容。 方法一： 使用 display...
flex 又名弹性布局，伸缩布局使用方法：在父容器内使用display:flex；自动对齐方法：justify-c...
1. 实现一个两栏布局，左侧固定宽度200px，右侧自适应宽度，附上预览接。 使用浮动做布局 使用 flex 布局...
1. 两栏布局 两栏布局的特征是侧栏固定宽度，主栏自适应宽度。 实现方法： float + margin： 也可以...
先说结论flex：1即为flex-grow：1，经常用作自适应布局，将父容器的display：flex，侧边栏大小...
页面布局 题目1：三栏布局，中间自适应，左右两栏固定宽度300px 写出3种方案算是及格给出5种方案，不管使用哪种...
本文标题：使用display制作自动适应的两栏布局
本文链接：https://www.haomeiwen.com/subject/auigittx.html
网友评论