正文

2018-05-22css左右布局左中右布局以及一些小技巧

enochqin  2022-02-10  586

关键词：

1、左右布局

如果有以下html结构，设置左右两栏布局

<div class="parent">
  <div class="leftChild"></div>
  <div class="rightChild"></div>
</div>

设置浮动：左右布局常用的方法就是为子元素设置浮动，然后在其父元素上使用clearfix类清除浮动。示例代码如下：
```
.clearfix::after{
  content:"";
  display:block;
  clear:both;
}
.leftChild,
.rightChild{
  float:left;
}
```

设置position绝对定位，为父元素设置position:relative; 为子元素设置position:absolute 。示例代码如下：

.parent{
  position:relative;
}
.leftChild{
  position:absolute;
  left:0;
  top:0;
}
.rightChild{
  position:absolute;
  left:200px;
  top:0;
}

2、左中右布局

左中右布局主要方法也是浮动或者绝对定位，不过可以分情况选择其一使用甚至结合使用。

3、特定情况下使用浮动还是绝对定位

使用浮动时：不需要计算特别精确的位置，不过不易操控，浮动元素的宽度需要注意，否则会换行展示，适用于导航栏等地方。
使用绝对定位：需要计算元素的具体位置，不过更加准确，易于操控。
当某些元素的位置要根据父元素的大小自适应，内容宽度无法确定时，建议使用浮动
当特定元素的位置是相对父元素固定，或者内容宽高确定，需要精确定位甚至以后要用js操作变换位置时，建议使用浮动。

5、其他小技巧

使用伪元素清除浮动，代码展示见下一条。
当要达到一个元素hover状态下有边框，正常情况下无边框时，如果直接在hover状态添加边框，该元素会因为多出来的border宽度导致位置有略微改变。技巧：可以在普通情况下就添加透明色的边框，hover时改变颜色即可。比如
html代码：
```
<nav class="clearfix">
  <li><a href="#">link1</a></li>
  <li><a href="#">link2</a></li>
  <li><a href="#">link3</a></li>
  <li><a href="#">link4</a></li>
  <li><a href="#">link5</a></li>
  <li><a href="#">link6</a></li>
</nav>
```
css代码

.clearfix::after{
  content: "";
  display: block;
  clear: both;
}
nav{
  border: 1px solid red;
  float: right;
}
nav > li{
  float: left;
  list-style: none;
}
nav > li > a{
  text-decoration: none;
  color:inherit;
  display: inline-block;
  margin:5px;
  padding:10px;
  border: 3px solid transparent;
  transition:0.3s;
  
}
nav > li > a:hover{
  border:3px solid blue;
}

效果图：
技术分享图片

水平线样式设置
代码示例：

hr{
    height:0;
    border:none;
    border-top:1px solid red;
}

dl中dd、dt设置左右结构
html代码

<body>
<main>
  <dl class="clearfix">
    <dt>num</dt>
    <dd>1</dd>
    <dt>num</dt>
    <dd>2</dd>
    <dt>num</dt>
    <dd>3</dd>
    <dt>num</dt>
    <dd>4</dd>
  </dl>
</main>

css代码

main > dl{
  width:300px;
  border: 1px solid;
}
main > dl >dt,
main > dl >dd{
  float: left;
  width:30%;
  box-sizing:border-box;
  border:1px solid blue;
}
main > dl >dd{
  width:70%;
}

效果图：
技术分享图片

一些图标素材可以使用iconfont网站来查找
合理使用伪元素（如::after、::before）
块级元素宽度自使用，合理使用max-width属性
a标签去掉其默认样式时，颜色可设置为继承父元素a{color:inherit;}

css+div左中右经典布局之

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>16-2</title></head><styletype="text/css">body{margin:0px;padding:0px;}#contain{margin:0px;padding: 查看详情

左右两栏固定宽度，中间自适应布局的5种方案

参考技术A通过float，让左右2栏浮动到左边和右边，然后中间div需要放在左右两个div之后。左中右三个div都需要设置绝对定位：position:absolute，左侧div设置left:0靠左，右侧div同理设置right:0靠右，中间div设置left和right值为左侧和右... 查看详情

左中右布局经典案例

<!DOCTYPEhtml><htmllang="en-US"> <head> <metahttp-equiv="Content-Type"content="text/html;charset=gbk"> <styletype="text/css"> 查看详情

css——圣杯布局

...高度固定中间dontainer部分为左中右三栏式布局三栏布局中左右两侧宽度固定，中间部分自动填充实现方式1.浮动先定义header和footer的样式，使其宽度撑满，高度随意container中三列设置为浮动和相对定位，且center部分放在最起那么... 查看详情

三栏布局的几种方法(代码片段)

三栏布局是一个比较常见的布局，在高度固定的情况下，左右各留出300px，中间自适应，可以有以下的几种写法。比较常见的有浮动布局和绝对定位布局，但是flex布局现在也非常普遍了，Grid布局可能兼容性不太好，但也不失为... 查看详情

移动端css布局大全(代码片段)

...39;...'1fr'.中.'auto'...'1fr/1frauto1fr;--双列:'左右'1fr/1fr1fr;--三列:'左中右'1fr/1frauto1fr;--吕形:'上'auto'下'1fr/1fr;--上下栏:'上'auto'中'1fr'下'auto/1fr;--四宫格:'左上右上'1fr'左... 查看详情

网页自适应布局方案(代码片段)

...绝对定位法这或许是三种方法里最直观，最容易理解的：左右两栏采用绝对定位，分别固定于页面的左右两侧，中间的主体栏用左右margin值撑开距离。于是实现了三栏自适应布局。css代码如下HTML代码为这里的左中右三个div的顺... 查看详情

兼容ie9的左中右布局

flex不兼容ie9，所以<!DOCTYPEhtml><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>标题</title></head><body><table><tr><td& 查看详情

《web前端笔记30》css三栏布局、左右两栏宽度固定，中间自适应

参考技术A三栏布局一般指的是页面中一共有三栏，左右两栏宽度固定，中间自适应的布局，三栏布局的具体实现：利用浮动和负边距来实现。父级元素设置左右的padding，三列均设置向左浮动，中间一列放在最前面，宽度设置为... 查看详情

如何在约束布局内同时应用左右约束时将布局左对齐？

】如何在约束布局内同时应用左右约束时将布局左对齐？【英文标题】：HowtoalignalayouttoleftwhilebothleftandrightconstraintsareappliedtoitinsideConstraintLayout?【发布时间】：2021-04-2902:40:10【问题描述】：这是我要设计的布局：从图片中可以看... 查看详情

布局：左宽度固定，右边自适应

需求：左侧固定宽，右侧自适应屏幕宽；左右两列，等高布局；左右两列要求有最小高度，例如：200px;（当内容超出200时，会自动以等高的方式增高）方法1：浮动布局这种方法我采用的是左边浮动，右边加上一个margin-left值... 查看详情

css布局一

...x;height:650px;margin:0auto;border:1pxsolid#ccc;/*就是说上下边距为0左右自动，当浏览的大小大于600时，左右两边的margin平分大于出来的宽度*//*但是，如果小于的话，就会出现滚动条*/}优化：使用我们的max-width:960px;就不会出现滚动查看详情

三列布局

介绍几种左中右布局，左右定宽，中间自适应，扩展阅读可搜索关键字：圣杯布局，双飞翼布局注：建议所有布局都要有个包裹container并设置min-width（或width）等于设计稿所给尺寸，防止浏览器尺寸变化造成样式混乱。另，简易... 查看详情

自适应布局左右结构上下结构

一、左右结构左边固定，右边自适应1.左边左浮动，右边加个overflow:hidden;#lt{float:left;width:200px;background:#ff0;}#rt{overflow:hidden;background:#f0f;}2. 左边左浮动，右边加个margin-left;#lt{float:left;width:200px;backgr 查看详情

div+css实现双飞翼布局

本例通过div+css实现HTML金典布局双飞翼布局，该布局结构为上中下结构，上：header头；下：footer尾；中：内容，将内容分为了三个结构，左中右下图是效果图我们来看下代码<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF... 查看详情

css怎么左右布局

参考技术A所谓左右布局，既一个div在左边，一个div在右边。用浮动定位可以实现左右布局，也可以用弹性布局实现左右布局效果。查看详情

css布局之浮动布局

布局(layout),指各个元素在网页里如何摆放以形成最终的页面,默认布局是从左到右、从上到下。改变元素的默认布局方式有很多种，浮动(float)就是其中一种。1.浮动(float)浮动类似于word里面文字围绕图片的效果，可设置为向左(left)... 查看详情

css布局左右布局

本文是根据网上资料总结出来的文章左边固定，右边自适应的两栏布局。基本样式<divclass="wrapper"id="wrapper"><divclass="left">左边固定宽度，高度不固定</br></br></br></br>高度有可能会很... 查看详情