两列布局的自动宽度以及DIV水平居中

最新推荐文章于 2020-10-07 11:11:35 发布

iteye_4865

最新推荐文章于 2020-10-07 11:11:35 发布

阅读量211

点赞数

分类专栏： xhtml / css 文章标签： IE CSS 浏览器 XHTML HTML

本文链接：https://blog.csdn.net/iteye_4865/article/details/81641883

版权

xhtml / css 专栏收录该内容

47 篇文章 0 订阅

订阅专栏

两列布局的自动宽度

<!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-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css"> 
<!-- 
body  {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	background: #666666;
	margin: 0; /* 最好将 body 元素的边距和填充设置为 0 以覆盖不同的浏览器默认值 */
	padding: 0;
	text-align: center; /* 在 IE 5* 浏览器中，这会将容器居中。
文本随后将在 #container 选择器中设置为默认左对齐 */
	color: #000000;
}
.twoColHybLt #container { 
	width: 80%;  /* 这将创建一个占据 80% 浏览器宽度的容器 */
	background: #FFFFFF;
	margin: 0 auto; /* 自动边距（与宽度一起）会将页面居中 */
	border: 1px solid #000000;
	text-align: left; /* 这将覆盖 body 元素上的“text-align: center”。 */
} 
/* sidebar1 提示：
1. 由于我们使用的是相对单位，因此最好不要在侧栏中使用填充。它将会增加符合标准的浏览器的总宽，
并产生未知的实际宽度。 
2. 由于 sidebar 值以全方 (em) 为单位，请记住侧栏的宽度将随不同的默认文本大小而变化。
3. 如果为 div 中的元素设置左边距和右边距，则会在 div 边缘和这些元素之间产生空白，
如“.twoColHybLt #sidebar1 p”规则中所示。
*/
.twoColHybLt #sidebar1 {
	float: left; 
	width: 12em; /* 由于此元素是浮动的，因此必须指定宽度 */
	background: #EBEBEB; /* 将显示背景色，其宽度等于栏中内容的长度，*/
	padding: 15px 0; /* 顶部和底部的填充将在该 div 中产生视觉空间 */
}
.twoColHybLt #sidebar1 h3, .twoColHybLt #sidebar1 p {
	margin-left: 10px; /* 对于将要放在侧栏中的每个元素，都应当设置左边距和右边距 */
	margin-right: 10px;
}
/* mainContent 提示：
1. mainContent 和 sidebar1 之间的空白是由 mainContent div 的左边距创建的。
无论 sidebar1 div 中包含多少内容，都将保留栏空白。如果您希望在 #sidebar1 中的内容结束时，
用 #mainContent div 的文本填充 #sidebar1 空白，则可以删除此左边距。
2. 请记住，如果在 mainContent div 中放置了过宽的元素，则有可能会导致“浮动下降”
（即，侧栏下面非浮动的 mainContent 区域下降）。对于混合布局（总宽基于百分比，侧栏基于全方 (em)），
则可能无法计算确切的可用宽度。如果用户的文本大小大于平均值，则侧栏 div 将更宽，
因此，mainContent div 中的空间将更小。您应当注意到这种限制，
当客户端使用 Contribute 添加内容时尤其如此。
3. 在下面的 Internet Explorer 条件注释中，zoom 属性用来赋予 mainContent“hasLayout”。
这可能会有助于避免若干特定于 IE 的错误。
*/
.twoColHybLt #mainContent { 
	margin: 0 20px 0 13em; /* 右边距可以用百分比或像素来指定，它会在页面的右下方产生空白。 */
} 
/* 要重用的各种类 */
.fltrt { /* 此类可用来使页面中的元素向右浮动。浮动元素必须位于页面上要与之相邻的元素之前。 */
	float: right;
	margin-left: 8px;
}
.fltlft { /* 此类可用来使页面上的元素向左浮动 */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* 此类应当放在 div 或 break 元素上，
而且该元素应当是完全包含浮动的容器关闭之前的最后一个元素 */
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}
--> 
</style><!--[if IE]>
<style type="text/css"> 
/* 请将所有版本的 IE 的 css 修复放在这个条件注释中 */
.twoColHybLt #sidebar1 { padding-top: 30px; }
.twoColHybLt #mainContent { zoom: 1; padding-top: 15px; }
/* 上面的专用 zoom 属性为 IE 提供为避免几个错误而可能需要的 hasLayout */
</style>
<![endif]--></head>
<body class="twoColHybLt">
<div id="container">
  <div id="sidebar1">
<h3>sidebar1 内容</h3>
<p>此 div 上所显示的背景色刚好与内容等宽。如果您喜欢改用分界线，
而且 #mainContent div 所包含的内容将始终比 #sidebar1 div 中的多，
请在 #mainContent div 的左边缘放置一个边框。 </p>
    <p>Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque  eget, 
cursus et, fermentum ut, sapien. Fusce metus mi, eleifend  sollicitudin, molestie id, 
varius et, nibh. Donec nec libero.</p>
  <!-- end #sidebar1 --></div>
  <div id="mainContent">
<h1> 主要内容 </h1>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, 
 justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante 
ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, 
felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus
 tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo
 pede, rhoncus venenatis, tristique in, vulputate at,  odio. Donec et ipsum et 
sapien vehicula nonummy. Suspendisse potenti. Fusce  varius urna id quam.
 Sed neque mi, varius eget, tincidunt nec, suscipit id,  libero. In eget purus. 
Vestibulum ut nisl. Donec eu mi sed turpis feugiat  feugiat. Integer turpis arcu, 
pellentesque eget, cursus et, fermentum ut,  sapien. Fusce metus mi, eleifend 
sollicitudin, molestie id, varius et, nibh.  Donec nec libero.</p>
    <h2>H2 级别的标题 </h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, 
 justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  
ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor,
 felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique 
purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, 
tristique in, vulputate at, odio.</p>
	<!-- end #mainContent --></div>
	<!-- 这个用于清除浮动的元素应当紧跟 #mainContent div 之后，以便强制 #container 
div 包含所有的子浮动 --><br class="clearfloat" />
<!-- end #container --></div>
</body>
</html>

DiV 水平居中问题

margin-left:auto;
　　margin-right:auto;

　　其实等同于：

　　margin:0 auto;

于是可以使用这种方式，但是有人用IE时发现没有居中。这里建议你看看是否遗漏了DTD声明。

＜!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” 
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”＞

非常多的人犯过类似的错误！这种方法也可以说屡试不爽，但是在某些情况下还是行不通的。于是有了第二种方法。

　　 margin-left:50%;
　　left: -width/2;

　　这里的width不是CSS中的Width,而是你的DIV的宽度例如你的div是768px宽，那么你就应该设置left:-384px。很好，已经有两种方法了，可以说已经能够解决你可能遇到的问题了。

　　有时候你会发现，这两个还不行。不能兼容一些浏览器。于是发现有了第三种方法，这中方法主要是考虑IE，它是建立在第一种方法的基础之上。它需要设置body。

　　body {text-align: center;}

　　这样IE下也居中了，但是它带来一个新的问题，你发现你的页面中所有文字都是居中的，这样很不好看。这个就很容易解决了，只需要在你的DIV定义中加上

text-align: left;

之类调整的设置就行了。

iteye_4865

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
两列布局的自动宽度以及DIV水平居中

两列布局的自动宽度 &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt...
复制链接

扫一扫

专栏目录