等高2三列布局

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

*{padding:0; margin:0;}

.wrap{ position:relative; overflow:hidden; zoom:1;}

.left{ float:left; padding-bottom:1000px; margin-bottom:-1000px; background-color:#f00;}

.right{float:left; padding-bottom:1000px; margin-bottom:-1000px;background-color:#000; color:#fff;}

.c{background:#eee;zoom:1;overflow:hidden; padding-bottom:1000px; margin-bottom:-1000px;}

</style>

</head>

<body>

<div>

<div>

00<br/>

00<br/>

00<br/>

</div>

<div>

00<br/>

00<br/>

00<br/>

00<br/>

00<br/>

00<br/>

</div>

<div>

sss

</div>

</div>

</body>

</html>

时间： 2024-11-05 20:25:06

等高2三列布局的相关文章

Css布局系列-经典三列布局

今天给大家介绍经典三列布局和实现原理: 通过浮动(float)进行实现,如果对float不是很清楚可以去看看我上篇介绍的: 通过绝对定位布局: 通过float加margin的负值进行组合实现.  对三种情况分析: 第一种通过浮动(float)布局,特别需要注意在定义元素结构的时候要将居中元素放到right元素的后面(container->left-right-center),不能像正常那种思维去定义结构(container ->left-center-right): *{margin: 0;p

CSS三列布局

× 目录 两侧定宽中间自适应 两列定宽一侧自适应 中间定宽两侧自适应一侧定宽两列自适应三列自适应总结 前面的话 前面已经介绍过单列定宽单列自适应和两列自适应的两列布局.本文介绍三列布局,分为两侧定宽中间自适应.两列定宽一侧自适应.中间定宽两侧自适应.一侧定宽两列自适应和三列自适应这五种情况 两侧定宽中间自适应布局 思路一:  float [1]float + margin + calc <style> p{margin: 0;} .parent{overflow: hidden;} .left

CSS 布局实例系列（三）如何实现一个左右宽度固定，中间自适应的三列布局——也聊聊双飞翼

今天聊聊一个经典的布局实例: 实现一个三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化 可能很多朋友已经笑了,这玩意儿通过双飞翼布局就能轻松实现.不过,还请容我在双飞翼之外,循序渐进地介绍一下我们可以如何实现一个三列布局. 1. 首先,使用浮动布局来实现一下 See the Pen float-three-columns by xal821792703 (@honoka) on CodePen. 左侧元素与右侧元素优先渲染,分别向左和向右浮动 中间元素在文档流的

经典三列布局

html代码中,middle部分首先要放在container的最前面,然后是left,right.三列布局,中间宽度自适应,两边定宽.1.[国外]圣杯布局:左中右三列都设置浮动和相对定位,中列宽度100%占满,左右两列都有负边距,左列有左定位数,右列有右定位数.(IE6有问题) <div class="cupContainer"> <div class="middle">中列</div> <div class="l

web标准(复习)--3 二列和三列布局

今天学习二列和三列布局,将涉及到以下内容和知识点 二列自适应宽度 二列固定宽度 二列固定宽度居中 xhtml的块级元素(div)和内联元素(span) float属性 三列自适应宽度 三列固定宽度 三列固定宽度居中 IE6的3像素bug 一.两列自适应宽度下面以常见的左列固定右列自适应为例,因为div为块状元素,默认情况下占据一行的空间,要想让下面的div跑到右侧,就需要做助css的浮动来实现.首先创建html代码如下: <style>#side { background-color:#99F

简单的CSS网页布局--三列布局

三列布局其实不难,不过要用到position:absolute这个属性,因为这个属性是基于浏览器而言,左右部分各放在左右侧,空出中间一列来实现三列布局. 1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>三列自适应</title> 6 <style type="text/

css实现三列布局，左右固定值，中间自适应。

这里主要用到的是position:absolute;及margin属性;代码很简单,一看就明白. <!DOCTYPE html> <html lang="zh_CN"> <head> <meta charset="UTF-8"> <title>三列布局,左右固定值,中间自适应</title> <style type="text/css"> .container{p

div css三列布局效果实例代码

div css三列布局效果实例代码:三列布局在是比较中规中矩的布局之一,大量的网站都有应用,也是初学者必须要掌握的布局方式之一,下面就是一个三列布局的实例代码,仅供参考之用,希望对初学者有一定的帮助,代码实例如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <

特殊的三列布局-左右两列宽度固定，中间自适应

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ