我已经在网上搜索了,但是找不到答案。希望有人帮助我
出来。

在我的页面中,右列被向下推到左列之下,因为
宽度问题。这是我不需要改变所有宽度的任何方式吗
元件?我的意思是让右列与div是哪个类重叠
包装纸?

这是我的html页面:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>My first styled page</title>
<style type="text/css">

body {
    color: purple;
}

div.wrapper {
    width: 80%;
    border-style:solid;
    border-color:black;
}

 div.one {
    width: 300px;
    float: left;
    height: 300px;
    border-style:solid;
    border-color: #0000ff;
}

div.two {
    width: 1024px;
    border-style:solid;
    border-color:yellow ;
}

</style>
</head>
<body>
    <div class="wrapper">
        <div class="one">The left column</div>
        <div class="two">The right column</div>
    </div>
?
</body>


这是我页面的屏幕截图:

最佳答案

解:

<!DOCTYPE HTML>
<html>
    <head>
        <title>My first styled page</title>
        <style type="text/css">
            body {
                color:purple;
            }
            div.wrapper {
                width:80%;
                float:left;
                border-style:solid;
                border-color:black;
            }
            div.one {
                width:45%;
                float:left;
                height:300px;
                border:1px solid blue;
            }
            div.two {
                width:45%;
                float:right;
                border:1px solid yellow;
            }
        </style>
    </head>
    <body>
        <div class="wrapper">
            <div class="one">The left column</div>
            <div class="two">The right column</div>
        </div>
    </body>
</html>


结果:

10-06 07:16