HTML中制作两列布局使用浮动

最新推荐文章于 2021-06-22 18:11:55 发布

Vanqqqq

最新推荐文章于 2021-06-22 18:11:55 发布

阅读量810

点赞数

CC 4.0 BY-SA版权

分类专栏： web HTML 文章标签： html 布局

本文链接：https://blog.youkuaiyun.com/Vanqqqq/article/details/45788789

web 同时被 2 个专栏收录

33 篇文章

订阅专栏

HTML

5 篇文章

订阅专栏

本文介绍了两种实现网页两列布局的方法。第一种通过设置左浮动和内联显示来创建固定宽度的左侧栏，并利用左侧栏宽度加上额外间距确定右侧栏的位置。第二种方法使用绝对定位来固定左侧栏位置，同时为右侧栏预留空间。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

以前也知道两列布局是使用浮动，但浮动就带来了很多错乱的格式，今天百度了下，这种方法做的还比较正常。

<div class="service-left"></div>
<div class="service-right"></div>

    .service-left {
        display: inline;
        width: 300px;
        float:left;
    }

    .service-right {
        width: 680px;
        margin-top: 50px;
        margin-left:314px;
    }

还有一种方法是网上介绍的：（当然还没有试验，先记录着）

<!DOCTYPE html >
<head>
<style type="text/css">
#sidebar
{width:100px;height:100px;float:left;background-color:#cccccc;border:2px solid #333333;}
#Wrap
{position:absolute;left:113px;right:0px;height:300px;border:2px solid #333333;
background:#ccc url(http://www.baidu.com/img/baidu_logo.gif) no-repeat;}
#floatSpan {float:right;} //for ie6
</style>
</head>
<body>
<div id="sidebar"> left </div>
<div id="Wrap"> right<br />right<br />right<br />right<br />right<br />right<br />right<br />right<br />right<br /> <span id="floatSpan"><span>
</div>
</body>
</html>