Question

我在网上搜索过，但找不到答案。希望有人帮助我进行。

在我的页面中，右列是向下按下左列，因为宽度问题。这是否我不需要改变所有的宽度元件？我的意思是让右列与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>

我的页面有屏幕截图： enter image description here

Answer 1

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

div.two {
  border-style:solid;
  border-color:yellow ;
  margin-left: 310px;
}

Answer 2

<强>解决方案：

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

<强>结果：
enter image description here

列推下css问题

2 个答案: