gpt4 book ai didi

html - 如何并排制作 div 以及向下移动页面

转载 作者:行者123 更新时间:2023-11-28 16:06:32 24 4
gpt4 key购买 nike

我正在尝试创建一个“与团队会面”的内联网页面,但我似乎想不出最好的方法。所以,首先,这是我的代码;

`<html>
<head>
<h1>Meet the Team</h1>
</head>
<body>

<h3>Joe Bloggs</h3>

<div id="joe" style="position:relative;width:300px;height:350px;background-color:#959595;">
<p>Test paragraph</p>

</div>

<h3>John Smith</h3>

<div id="john" style="position:relative;width:300px;height:350px;background-color:#959595;">
<p>Test paragraph</p>

</div>

<h3>Jane Doe</h3>

<div id="jane" style="position:static;top:50%;float:right;width:300px;height:350px;background-color:#959595;">
<p>Test paragraph</p>

</div>


</body>
</html>`

现在,设置为 relative 的“div”基本上都在页面下方,但我想要连续 3 个,然后在列中向下显示人员姓名,然后显示他们的 Angular 色描述。所以..

123
456
789

我试过使用其他位置元素,例如绝对位置元素,但将 div 并排放置似乎不起作用。我还想知道在 div 中包含 <h3> 但没有背景颜色的最佳方法。最后,我知道内联 CSS 可能不是这里使用的最佳选择,但我希望每个 div 的背景颜色略有不同。

最佳答案

这是你要找的吗?

#team{
background-color: #e7eaea;
width: 100%;
}
#team > div{
background-color: #a0c3ce;
margin: 1%;
width: 31%;
float: left;
}
h1, h3{
width: 100%;
text-align: center;
}
<html>
<head>
<title>Meet the Team</title>
</head>
<body>
<h1>Meet the Team</h1>
<div id="team">
<div id="joe">
<h3>Joe Bloggs</h3>
<p>Test paragraph</p>
</div>

<div id="john">
<h3>John Smith</h3>
<p>Test paragraph</p>
</div>

<div id="jane">
<h3>Jane Doe</h3>
<p>Test paragraph</p>
</div>
</div>
</body>
</html>

关于html - 如何并排制作 div 以及向下移动页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41463670/

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