gpt4 book ai didi

html - 使用 float 时出现错误?

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

当我使用 CSS float 属性时,它的工作部分完美正如我们在 HTML 中看到的那样,ID #contact 完美地漂浮在右侧,但 ID #workExperiance 应该按正常顺序位于全名下方如何做到这一点它也漂浮。需要详细说明

body {
font-family: Arial, sans-serif;
font-size: 1.1em;
width: 75%;
margin: 0 auto;
}

.main {
color: #4EC5C1;
}

#name {
float: left;
}

#contact {
float: right;
list-style-type: none;
}
<html lang="en">

<head>
<title>Full Name Resume</title>
<meta charset=utf-8>
</head>

<body>
<div>
<section>
<h1 id="name"><span class="main">full </span> Name</h1>
</section>
<section>
<ul id="contact">
<li><span class="main">Cell:</span> +1-000000000</li>
<li><span class="main">Email: </span> aaaaaa@gmail.com</li>
<li><span class="main">Location:</span> NY,USA.</li>
</ul>
</section>
</div>
<section id="workExperiance">Work Experience</section>
</body>

</html>

最佳答案

添加div{float:left; width:100%; 它会起作用

body {
font-family: Arial, sans-serif;
font-size: 1.1em;
width: 75%;
margin: 0 auto;
}
div{float:left; width:100%;}
.main{color: #4EC5C1;}
#name{float:left;}
#contact{float:right;list-style-type:none;}
<html lang="en">
<head>
<title>Full Name Resume</title>
<meta charset=utf-8>
</head>
<body>
<div>
<section><h1 id = "name"><span class = "main">full </span> Name</h1></section><section>
<ul id="contact"><li><span class = "main">Cell:</span> +1-000000000</li>
<li><span class = "main">Email: </span> aaaaaa@gmail.com</li>
<li><span class = "main">Location:</span> NY,USA.</li></ul></section>
</div>
<section id="workExperiance">Work Experience</section>
</body>

</html>

关于html - 使用 float 时出现错误?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47900269/

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