gpt4 book ai didi

html - 不能 magin-top 一个 div?

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

我尝试将 magin-top 添加到 div 样式中..但它不起作用

enter image description here

这是代码

.side {
margin-left: 65%;
margin-top: 3%;
margin-right: 3%;
border: 1px solid;
}

.home {
margin-left: 3%;
margin-top: 3%;
width: 62%;
border: 1px solid;
float: left;
}

.home h1 {
margin-top: 0;
}

.side h1 {
margin-top: 0;
}
<div class="home">
<h1>Home</h1>
<p>Just a template.</p>
</div>
<div class="side">
<h1>Widget Header</h1>
<hr>
<p>Widget content.</p>
</div>

我希望“side”div 与“home”div 在同一行

最佳答案

当您将 float:left 分配给一个元素时,该元素将向该方向移动,而其他元素将环绕它。如果您检查页面,您可以看到 .side 覆盖了页面的总宽度,而 .home就坐在上面。要使 .side 与 .home 对齐,请最小化 .home 的宽度和 .side 的左边距,以便两个 div 都可以适应页面的宽度。接下来应用 float:left到 .side,以便它可以与 .home 对齐。这是一个可行的解决方案:-

<html>
<head>
<style>
.home {
margin-left: 3%;
margin-top: 3%;
width: 50%;
border: 1px solid;
float: left;
}
.side {
margin-left:5%;
margin-top: 3%;
margin-right: 3%;
float:left;
border: 1px solid;
}
</style>
</head>
<body>
<div class="home">
<h1>Home</h1>
<p>Just a template.</p>
</div>
<div class="side">
<h1>Widget Header</h1>
<hr>
<p>Widget content.</p>
</div>
</body>
</html>

这是一个视频链接,可以让您清楚地了解 float :https://www.youtube.com/watch?v=xara4Z1b18I

关于html - 不能 magin-top 一个 div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45340950/

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