不用float实现div模块居中布局

不用float实现div模块居中布局 在网页布局中，实现div模块居中的方法有很多，但是一般来说，使用float属性是最常见的方法之一。然而，在某些情况下，我们可能需要不使用float属性来实现div模块居中布局。这时，我们可以使用其他的CSS布局方法来实现这种效果。 在这个示例中，我们将展示两种不使用float属性实现div模块居中布局的方法。 方法A: 使用margin和position属性 在方法A中，我们使用margin和position属性来实现left模块的居中布局。我们将left模块的宽度设置为760px，并使用margin:auto来实现居中布局。然后，我们将left_module模块的宽度设置为280px，并使用position:absolute来设置其位置在顶部定义的高度处。 这种方法的好处是可以让left和right两个模块的代码片断互换调整显示优先级。 方法B: 使用relative和absolute属性 在方法B中，我们使用relative和absolute属性来实现left模块的居中布局。我们将left模块的宽度设置为760px，并使用margin:auto来实现居中布局。然后，我们将left_module模块的宽度设置为280px，并使用position:absolute来设置其位置在顶部定义的高度处。 这种方法的好处是可以让顶部的高度自由延伸。 right模块的布局 对于right模块的布局，我们可以使用margin语法来实现居左布局。right_module模块的宽度设置为440px，并使用margin:0 0 0 auto来实现居左布局。right模块的背景色设置为右侧的背景色，并将其高度设置为中间模块的高度。 底部模块的布局 对于底部模块的布局，我们可以使用常规的定义方法。我们将foot模块的高度设置为100px，并使用margin:auto来实现居中布局。 浏览器兼容性 这个示例代码在IE6.0和FF1.5浏览器中都可以正常工作。这两个浏览器都是最常见的浏览器，使用的语法也非常简单。 这个示例代码展示了两种不使用float属性实现div模块居中布局的方法，并且提供了right模块和底部模块的布局方法。这种方法可以广泛应用于实际项目中，实现div模块的居中布局。