搜索
您的当前位置:首页正文

DIV/CSS实现三列,左右两列固定,中间一列自适应_html/css

2023-11-27 来源:谷彼宠物网

CSS:

#left{width:200px;min-height:400px;float:left;} #center{min-height:400px;margin:0 210px;} #right{width:200px;min-height:400px;float:right};

Html:

注意:HTML中三个div的顺序是 左、右、中;

小编还为您整理了以下内容,可能对您也有帮助:

下面三列布局的搜索栏,左右两边固定宽度,中间自适应宽度,div+css如何写代码?

左右固定宽度,用position属性, 中间自适应用margin属性 上右下左。上下为0 左边的距离等于左div的宽度,右边的距离等于右div的宽度。

<html>

<head>

<meta charset="UTF-8"/>

<title></title>

<style type="text/css">

*{margin: 0;padding: 0;}

#a{

width: 200px;

height: 800px;

background: red;

position: absolute;

top: 0;

left: 0;

}

#b{

height: 800px;

background: #ccf;

margin: 0 auto;

}

#c{

width: 300px;

height: 800px;

background: yellow;

position: absolute;

top: 0;

right: 0;

}

</style>

</head>

<body>

<div id="a"></div>

<div id="b"></div>

<div id="c"></div>

</body>

</html>追问中间椭圆搜索框 宽度自适应是如何实现的呢?

追答这就是一个三列布局,中间自适应,边框属性border-radius:50%;

css实现3个div左右两个定宽,中间自适应

本篇文章就给大家介绍css3实现可以计算的自适应布局—calc()。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。

开始我们需要先了解什么是calc() ,calc()是一个CSS函数,你可以使用calc()给元素的margin、pading、width等属性设置

而且你还可以在一个calc()内部嵌套另一个calc()

clac()的语法就非常简单了 , 使用数学表达式来表示:

expression 一个数学表达式,用来计算长度的表达式,该表达式的结果会作为最终的值。

clac()使用“+”、“-”、“*” 和 “/”四则运算,可以使用百分比、px、em、rem等单位,而且可以混用多种单位计算

需要注意的是

如果“0”作为除数会让HTML解析器抛出异常.

“+”和“-”时,前后必须要有空格 比如calc(100%-15px) 这是错误的

“*”和“/”时,前后可以不留空格,但是建议加上空格

举两个例子

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>demo</title> 6 <style> 7 .box{ 8 width: 500px; 9 height: 300px;10 }11 .left{12 width: 250px;13 background:#ccc;14 float: left;15 }16 .right{17 width: calc(100% - 250px);18 float: right;19 background: #333;20 }21 .left,.right{22 height: 100%;23 }24 </style>25 </head>26 <body>27 28 <p class="box">29 <p class="left"></p>30 <p class="right"></p>31 </p>32 33 </body>34 </html>

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>demo</title> 6 <style> 7 .demo{ 8 width: 500px; 9 }10 .box{11 width: 100%;12 height: 30px;13 background: #ccc;14 }15 input{16 width: 100%;17 border:1px solid #333;18 width: calc(100% - (0px + 1px) * 2);19 }20 </style>21 </head>22 <body>23 <p class="demo">24 <p class="box">25 <input type="text">26 </p>27 </p>28 </body>29 </html>

如果不使用calc()

兼容问题也不是很大

css实现3个div左右两个定宽,中间自适应

本篇文章就给大家介绍css3实现可以计算的自适应布局—calc()。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。

开始我们需要先了解什么是calc() ,calc()是一个CSS函数,你可以使用calc()给元素的margin、pading、width等属性设置

而且你还可以在一个calc()内部嵌套另一个calc()

clac()的语法就非常简单了 , 使用数学表达式来表示:

expression 一个数学表达式,用来计算长度的表达式,该表达式的结果会作为最终的值。

clac()使用“+”、“-”、“*” 和 “/”四则运算,可以使用百分比、px、em、rem等单位,而且可以混用多种单位计算

需要注意的是

如果“0”作为除数会让HTML解析器抛出异常.

“+”和“-”时,前后必须要有空格 比如calc(100%-15px) 这是错误的

“*”和“/”时,前后可以不留空格,但是建议加上空格

举两个例子

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>demo</title> 6 <style> 7 .box{ 8 width: 500px; 9 height: 300px;10 }11 .left{12 width: 250px;13 background:#ccc;14 float: left;15 }16 .right{17 width: calc(100% - 250px);18 float: right;19 background: #333;20 }21 .left,.right{22 height: 100%;23 }24 </style>25 </head>26 <body>27 28 <p class="box">29 <p class="left"></p>30 <p class="right"></p>31 </p>32 33 </body>34 </html>

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>demo</title> 6 <style> 7 .demo{ 8 width: 500px; 9 }10 .box{11 width: 100%;12 height: 30px;13 background: #ccc;14 }15 input{16 width: 100%;17 border:1px solid #333;18 width: calc(100% - (0px + 1px) * 2);19 }20 </style>21 </head>22 <body>23 <p class="demo">24 <p class="box">25 <input type="text">26 </p>27 </p>28 </body>29 </html>

如果不使用calc()

兼容问题也不是很大

CSS的经典三栏布局如何实现

这次给大家带来CSS的经典三栏布局如何实现,实现CSS的经典三栏布局的注意事项有哪些,下面就是实战案例,一起来看一下。

本文介绍了CSS经典三栏布局方案,分享给大家,也给自己做个笔记,具体如下:

三栏布局,顾名思义就是两边固定,中间自适应。三栏布局在开发十分常见

1. float布局

最简单的三栏布局就是利用float进行布局。首先来绘制左、右栏:

<style>

.left {

float: left;

width: 100px;

height: 200px;

background-color: red;

}

.right {

float: right;

width: 100px;

height: 200px;

background-color: yellow;

}

</style>

<div class="container">

<div class="left"></div>

<div class="right"></div>

<div class="main"></div>

</div>接下来再来看中间栏如何处理。我们知道对于float元素,其会脱离文档流,其他盒子也会无视这个元素。(但其他盒子内的文本依然会为这个元素让出位置,环绕在周围。)所以此时只需在container容器内添加一个正常的div,其会无视left和right,撑满整个container,只需再加上margin为left right流出空间即可:

<style>

.left {

float: left;

width: 100px;

height: 200px;

background-color: red;

}

.right {

float: right;

width: 100px;

height: 200px;

background-color: yellow;

}

.main {

background-color: green;

height: 200px;

margin-left: 120px;

margin-right: 120px;

}

.container {

border: 1px solid black;

}

<div class="container">

<div class="left"></div>

<div class="right"></div>

<div class="main"></div>

</div>优势:简单

劣势:中间部分最后加载,内容较多时影响体验

2. BFC 规则

BFC(块格式化上下文)规则规定:BFC不会和浮动元素重叠。所以如果将main元素设定为BFC元素即可:

<style>

.left {

float: left;

width: 100px;

height: 200px;

background-color: red;

}

.right {

float: right;

width: 100px;

height: 200px;

background-color: yellow;

}

.main {

background-color: green;

height: 200px;

overflow: hidden;

}

<div class="container">

<div class="left"></div>

<div class="right"></div>

<div class="main"></div>

</div>3. 圣杯布局

圣杯布局的核心是左、中、右三栏都通过float进行浮动,然后通过负值margin进行调整。

第一步,先来看下基本布局

<style>

.left {

float: left;

width: 100px;

height: 200px;

background-color: red;

}

.right {

float: left;

width: 100px;

height: 200px;

background-color: yellow;

}

.main {

float: left;

width: 100%;

height: 200px;

background-color: blue;

}

</style>

<body>

<div class="container">

<div class="main"></div>

<div class="left"></div>

<div class="right"></div>

</div>

</body>此时看到的效果是:左、右两栏被挤到第二行。这是因为main的宽度为100%。接下来我们通过调整左、右两栏的margin来将左、中、右放在一行中:

.left {

float: left;

width: 100px;

height: 200px;

margin-left: -100%;

background-color: red;

}

.right {

float: left;

width: 100px;

height: 200px;

margin-left: -100px;

background-color: yellow;

}第二步,将left的margin-left设置为-100%,此时左栏会移动到第一行的首部。然后再将right的margin-left设置为其宽度的负值:-100px,则右栏也会移动到和左、中栏一行中:

不过此时还没有大功告成,我们试着在main中加入一些文字:

<body>

<div class="container">

<div class="main">fjlskdjflkasjdfljasdljlsjdljsdjflksadj</div>

<div class="left"></div>

<div class="right"></div>

</div>

</body>可以看到文字被压住了,接下来就要解决这个问题。

第三步,给container一个padding,该padding应该正好等于左、右栏的宽度:

.container {

padding-left: 100px;

padding-right: 100px;

}此时看到的结果是左、中、右三栏都整体收缩了,但文字依然被压住了。

第四步,给左、右两栏加上相对布局,然后再通过设置left和right值向外移动:

.left {

float: left;

width: 100px;

height: 200px;

margin-left: -100%;

position: relative;

left: -100px;

background-color: red;

}

.right {

float: left;

width: 100px;

height: 200px;

margin-left: -100px;

position: relative;

right: -100px;

background-color: yellow;

}到此为止,大功告成:

相信看了这些案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!

相关阅读:

html5怎样做出图片转圈的动画效果

在h5里手机端页面缩放应该如何实现

怎样用H5 Canvas实现3D动态Chart图表

H5的FileReader分布读取文件应该如何使用以及其方法简介

帮忙实现个css 3列 (左 中 右) 左右宽度固定 中间宽度自适应

实在赶时间的话就用div + table + css,这个应该很好做,本人不是DIV+CSS高手,路过拿2分。

DIV+CSS高度固定的

<style>

<!--

body{margin:0;background:#CCC;}

#leftpage,#centerpage,#rightpage{height:500px; border:none;}

#leftpage{width:150px;float:left;background:blue;margin:-500px 0 0 0;overflow:inherit;}

#centerpage{width:inherit;background:#fff;margin:0;padding:0 200px 0 150px;overflow:auto;}

#rightpage{width:200px;float:right;background:blue;margin:-500px 0 0 0;overflow:inherit;}

-->

</style>

</head>

<body>

<div id="centerpage"><a href="#">中间内容中间内容中间</a>内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内<a href="#">容中间内容中间内容中间内</a>容中间内容中间内容</div>

<div id="rightpage">右侧内容</div>

<div id="leftpage">左侧内容</div>

</body>

</html>

谷彼宠物网还为您提供以下相关内容希望对您有帮助:

下面三列布局的搜索栏,左右两边固定宽度,中间自适应宽度,div+css如何...

左右固定宽度,用position属性, 中间自适应用margin属性 上右下左。上下为0 左边的距离等于左div的宽度,右边的距离等于右div的宽度。&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"/&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/cs...

如何使div 左中右3列 中部一列宽度自适应

左边用LEFT对齐,右边用RIGHT对齐,设置固定大小200。中间的默认应该就是自适应。用table套一下。写写看。

帮忙实现个css 3列 (左中右) 左右宽度固定,背景图片纵向平铺, 中间宽度...

&lt;div id="right"&gt;右列&lt;/div&gt; &lt;/body&gt; &lt;/html&gt;

css实现3个div左右两个定宽,中间自适应

假定你左右两边的div宽度是一样的,都是300px,那么你可以给中间的div设置以下样式。width: calc(100% - 600px)这样一来你中间的div宽度就自适应了,不管怎么缩放都没关系。

帮忙实现个css 3列 (左中右) 左右宽度固定 中间宽度自适应

实在赶时间的话就用div + table + css,这个应该很好做,本人不是DIV+CSS高手,路过拿2分。DIV+CSS高度固定的 &lt;style&gt; &lt;!-- body{margin:0;background:#CCC;} leftpage,#centerpage,#rightpage{height:500px; ...

DIV+CSS如何实现三列宽度自适应

这种方法是借助于负的margin来实现的,首先在中间列定好固定值,因为此值是不会在改变的,接着对其进行左浮动;那么关键地主是在左右边栏设置地方,这种方法是将其都进行50%的宽度设置,并加上中负的左边距,此负的左边距...

如何让三个DIV块,两边宽度固定, 中间宽度自适应?

&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;宽度自适应布局&lt;/title&gt; &lt;style&gt; body,div{ margin:0; padding:0;} div{ height:200px; color:#F00;} .left{ float:left; width:100px; background:#00f...

高手进!--【CSS怎么实现三列浮动中间列宽度自适应】

今天我给大家介绍一下div+css三列宽度自适应的布局实例,希望对自适应宽度还不是很了解的朋友有所帮助。(提示:这里的宽度自适应是指中间宽度自动适应,左右两列固定宽度。)以下代码兼容IE6及以上、火狐、OPERA等目前主流...

编写CSS+DIV代码完成三列固定宽度的网页结构布局

给右列一设置margin:auto 50px; 上下外边距不管,左右个50px margin 意思是 简写属性在一个声明中设置所有外边距属性。这个简写属性设置一个元素所有外边距的宽度,或者设置各边上外边距的宽度。块级元素的垂直相邻外...

...帮忙实现个css 3列 左右宽度自适应 中间宽度固定

第二个就是DIV尺寸固定,DIV为TEXT-ALIGN:CENTER,在DIV里边放一个一行一列的表格,让表格的高度为DIV高度的100%,然后在表格的TD里边放valign=middle的属性,因为只有TD可以做到垂直居中。你也可以让这个表格为DIV同样的...

Top