一个简单的左中右，为了做到大多的浏览器兼容却不容易。
一个工作几年的专业前台程序员不知道一些用法也是正常。
<!DOCTYPE HTML>
<html>
<head>
<title> New Document </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
*{padding:0;margin:0;font: 12px/1.5 宋体;}
html{overflow-y:scroll;}
#all{border:5px dashed #f60;width:950px;overflow:hidden;margin:50px auto 0;}
#left{width:50px;background:yellow;float:right;}
#middle{width:830px;background:red;float:right;margin:0 0 0 10px;}
#right{width:50px;background:green;float:right;margin:0 0 0 10px;}
</style>
</head>
<body>
<div id ="all">
<div id = "left">左边</div>
<div id = "middle">中部</div>
<div id = "right">右部</div>
</div>
<br /><br /><br />
<div style="border-style:solid;border-color:yellow red;border-width:60px;height:30px;width:30px;float:left;margin:0 10px 0 0;"></div>
<div style="border-style:solid;border-color:yellow red;border-width:60px;height:0;width:0;float:left;margin:0 10px 0 0;"></div>
<div style="border-style:solid;border-color:white yellow red white;border-width:60px;height:0;width:0;float:left;margin:0 10px 0 0;"></div>
<!--
<div style="clear:both;height:0;font-size:0;line-height:0"></div> IE6自动会给空标签约12px的高度
-->
<!--
如果注释在两个浮动代码中间，有2个以上在注释 IE6 布局混乱
margin:50px auto 0; 第一参数 top 最后一个参数left
float:right 前面元素(整体递归)移动到下一个元素后面
-->
</body>
</html>
分享到：
相关推荐
在网页设计中，"DIV+CSS上下左右绝对居中"是一个常见的布局需求，尤其是在构建响应式网站时。这个主题涉及到CSS（层叠样式表）的布局技巧，它可以帮助元素在不同屏幕尺寸下都能保持在容器的中心位置。下面将详细探讨...
在CSS中，`div`元素是最常用的块级元素之一，常用于布局和内容容器。`border`属性是CSS中用于定义元素边框样式的属性，包括`border-top`, `border-right`, `border-bottom`, 和 `border-left`。这些属性允许我们分别...
5. 流动布局与Flexbox：在Div+CSS布局中，流动布局（Flow Layout）是基本的布局方式，元素按照顺序从左到右排列。随着Flexbox（弹性盒模型）的出现，可以更方便地处理复杂的单轴布局，如自适应、等宽/高布局等。 6....
HTML、Div和CSS是网页设计中的核心技术，它们共同构建了网页的结构和样式。下面将分别阐述这些概念以及它们在实际应用中的重要性。 HTML（HyperText Markup Language）是超文本标记语言，它是网页的基础，定义了...
在网页设计中，"js控制div左右切换带左右箭头"是一种常见的交互效果，它用于展示多内容区域，用户可以通过点击或悬浮在左、右箭头上实现内容的切换。这种效果常见于产品展示、轮播图或者选项卡式布局中，能够提供...
在这个框架中，CSS可能被用来设置div的宽度、间距、位置以及实现左右栏的对齐和收缩效果。 3. **jQuery**：jQuery库提供了便利的API，简化了DOM操作，如元素的选择、属性的修改和事件的绑定。在左右分栏收缩功能中...
在CSS3中，弹性布局（Flexbox）是一种强大的布局模式，允许开发者更加灵活地控制元素在容器中的排列、对齐和大小调整。在早期的浏览器实现中，WebKit浏览器（如Safari和Chrome）引入了一个实验性的前缀 `-webkit-box...
本篇将深入探讨"css+div"的经典问题，同时也会提及到jQuery语法在实际应用中的作用。 一、CSS基础与布局技巧 1. CSS选择器：CSS的选择器是用于定位HTML或XML文档中元素的规则，如类选择器（.class）、ID选择器(#id...
问题描述：假定有如下情况：<div id="a"><div id="b"></div></div> 如果要实现 b 在 a 中居中放置，一般只需用 CSS 设置 a 的 text-align 属性为 center。这样的方法在 IE 里看起来一切正常；但是在 Firefox 中 b 却...
在CSS中，我们可以为`div`元素设置样式，使其呈现为大括号形状。这通常涉及到定位、边框、背景颜色以及一些CSS3的新特性。 1. **定位**：通过`position`属性，我们可以将`div`元素放置在页面上的任意位置。可以设置...
标签“DivCSS网页布局”表明本书的重点是利用Div元素和CSS进行网页的结构化和美化。 在网页设计中，DivCSS布局是不可或缺的部分，它能够实现灵活、响应式的页面设计。Div元素作为一个通用的容器，可以用来包裹其他...
在网页设计领域，CSS（Cascading Style Sheets）与HTML的结合使用，特别是与`div`元素一起，已经成为创建响应式、结构清晰和易于维护的网页布局的标准方式。本教程将深入探讨`CSS+DIV`实例，帮助你理解并掌握这一...
在网页设计中，有时我们需要实现一个功能：当用户将鼠标悬停在某个div元素上时，显示特定的信息或另一个div。这个功能可以增强用户体验，帮助用户更好地理解和操作页面。本教程将详细介绍如何实现这一功能，并确保...
在移动网页开发中，"div左右滑动"是一种常见的交互设计，主要应用于WebApp中，以提供类似原生应用的用户体验。"swipe"（滑动）手势是这种交互的核心，用户可以通过左右滑动手指来浏览或切换页面内容。本文将深入探讨...
css：可以令层中层上下左右居中。（即：div之中的div的文本，上下左右居中显示）
本书的重点在于实战，通过一系列精心设计的案例，引导读者理解和掌握DIV+CSS在网页构建中的应用。 DIV，全称为Division，意为“分隔”，是HTML中的一个块级元素，常用于网页布局，通过设置CSS样式来控制其大小、...
向左滚动减少`left`值，向右滚动增加`left`值。同时，我们需要确保元素在滚动到边界后能够回到初始位置，从而实现循环滚动。 最后，`Images`目录可能包含了与滚动效果相关的图片资源，比如作为Div背景的图片，或者...
元素设置为浮动后，会脱离正常的文档流，向左或向右移动，直到碰到边框或者另一个浮动元素。 4. **Flex布局**：现代CSS中，Flexbox（弹性盒模型）提供了一种更灵活的布局方式，能够轻松处理单行或单列的布局，支持...
11.3 左中右版式 11.4 块的背景色问题 11.5 排版实例：电子相册 11.6 div排版与传统的表格方式排版的分析 第12章 CSS+div美化与布局实战 12.1 框架搭建 12.2 实例一：蓝色经典 ...
在网页设计领域，Div+CSS布局是构建网页结构的核心技术之一。"变幻之美-div css网页布局揭秘案例源码" 提供的是一系列基于Div和CSS的网页布局实践案例，旨在帮助学习者深入理解和掌握这两种技术的结合应用。下面将...