1

我已经搜索了网络，但我找不到答案。希望有人帮助我。

在我的页面中，由于宽度问题，右栏被下推到左栏下方。这是我不需要更改所有元素的宽度的任何方式吗？我的意思是让右列与 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>

有我的页面的屏幕截图： 在此处输入图像描述

4

2 回答 2

0

解决方案：

<!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>

结果：
在此处输入图像描述

于 2013-05-27T21:21:26.267 回答
0

尝试将第二个 div 样式更改为

div.two {
  border-style:solid;
  border-color:yellow ;
  margin-left: 310px;
}
于 2013-05-27T21:10:51.060 回答