gpt4 book ai didi

html - div不 float 到顶部

转载 作者:行者123 更新时间:2023-11-27 22:43:48 25 4
gpt4 key购买 nike

我创建了一个包含 3 个 div 的基本 HTML 页面布局。第三个 div(侧边栏)意味着 float 到右上角,但它 float 在右侧但在第一个 div 的下方。

有谁知道我哪里出错了?

因此,当窗口最大化时,绿色的 div(边栏)应该 float 到右上角,如果调整窗口大小时,它应该 float 在 div 1 下方和 div 2 旁边

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
<link rel="stylesheet" href="styles1.css" type="text/css" />

<style type="text/css">

.page {
width:90%;
}

.div1 {
width: 750px;
background-color: gray;
float:left;
}

.div2 {
width: 60%;
background-color: blue;
float:left;
}

.sidebar {
width: 30%;
background-color: green;
float: right;
}

</style>

</head>



<body>

<div class="page">
<div class="div1">
<p>div1</p>
</div>

<div class="div2">
<p>div2</p>
</div>

<div class="sidebar">
<p>sidebar</p>
</div>

</div>
</body>

</html>

最佳答案

考虑这个代码片段,我切换了“.div2”和“.sidebar”的位置

.page {
width:90%;
}

.div1 {
width: 750px;
background-color: gray;
float:left;
}

.div2 {
width: 60%;
background-color: blue;
float:left;
}

.sidebar {
width: 30%;
background-color: green;
float: right;
}
<div class="page">
<div class="div1">
<p>div1</p>
</div>

<div class="sidebar">
<p>sidebar</p>
</div>

<div class="div2">
<p>div2</p>
</div>

</div>

关于html - div不 float 到顶部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59709098/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com