gpt4 book ai didi

html - float 不能正常工作

转载 作者:太空宇宙 更新时间:2023-11-04 03:20:52 25 4
gpt4 key购买 nike

我正在尝试将某些内容向右浮动,但它无法正常工作。我正在尝试使用类获得类似 eu-accounts.com > right banner 的内容。

这就是我现在得到的

<!DOCTYPE HTML>
<html>
<head>
<title> Haltqt - Accounts </title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>

<body>

<div id="banner">

</div>

<div id="content">
hier komt content
<div id="product">
Products will come here
</div>
</div>
<div id="classen"> hier komen de classes
</div>

</body>

<footer> &copy Haltqt-accounts.com </footer>

</html>

和CSS:

* {
margin: 0;
}
html, body {
height: 100%;
}
#banner {
margin:0px;
padding:0px;
width:100%;
height:300px;
background-color:#000; /* deze staat nu op zwart, dit is de banner. dit moeten we op transparant zetten en in de body een wallpaper als achtergrond om het effect te krijgen van eu-accounts.com*/
}

#content {
margin: 0 auto;
padding:0;
width: 70%;
background-color:yellow;
}

footer{
margin: 0 auto;
padding:0;
width: 70%;
text-align:center;
}

#classen {
width:15%;
margin:0 auto;
padding:0;
float:right;
background-color:red;
}

#product {
margin:5px;
padding:5px;

}

http://jsfiddle.net/y8j5hw5c/

你能看看为什么类 classen 没有正确 float 吗?谢谢。

最佳答案

你可以做这样的事情,因为尺寸是预定义的:

#content {
margin: 0 0 0 15%;
padding:0;
width: 70%;
float:left;
background-color:yellow;
}

您还应该使用 clear: both; 清除 footer 元素的 float 。
P.S.:您应该将 footer 放在 body 元素中

JSFiddle

关于html - float 不能正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27903236/

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