gpt4 book ai didi

html - 关于位置/像素/div/等等,我的 HTML 逻辑是否正确?

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

我正在努力确保我完全理解它。假设我想要一个恰好 600 像素宽和 1000 像素高的页面,由 div 分成 3 个等距的列,每个列的边框为 1 像素。然后每个 div 应该是 998 像素高和 198 像素宽,并且它们应该绝对定位在各自的(顶部,左侧)位置(0,0),(0,200)和(0,400),因为 600 像素宽的主体对应于 0 到 599 的绝对水平像素位置。这 3 个 div 将占据主体的整个宽度。我不必担心 div 的边距或正文的填充,因为当绝对定位处于事件状态时,这些值无关。正确吗?

这是我的代码:

<html>

<head>
<title>div practice</title>
<style type="text/css">
body
{
height: 1000px;
width: 600px;
}
.outercol
{
position: absolute;
width: 198px;
height: 998px;
border: solid 1px black;
}
#co1
{
top: 0px;
left: 0px;
}
#co2
{
top: 0px;
left: 200px;
}
#co3
{
top: 0px;
left: 400px;
}
</style>
</head>

<body>
<div class="outercol" id="co1">
<p>This text is inside column 1</p>
</div>
<div class="outercol" id="co2">
<p>This text is inside column 2</p>
</div>
<div class="outercol" id="co3">
<p>This text is inside column 3</p>
</div>
</body>

</html>

最佳答案

这就是现在向 div 添加内边距时发生的情况。 DEMO

而是尝试像下面这样的东西。它使用百分比,这使得它有点困难,但从长远来看会更好。

HTML:

<div id="container">
<div class="block">
Block 1
</div>
<div class="block">
Block 2
</div>
<div class="block">
Block 3
</div>
</div>

CSS

#container {
width: 600px;
height: 500px;
display: block;
overflow: auto;
}
.block {
float: left;
width: 31%;
padding: 1%;
border: 1px solid black;
}

DEMO

要增加内边距,请将宽度减小 1%,然后再增加 0.5% 的内边距。

例子:

width: 31%;
padding: 1%;

成为

width: 30%;
padding: 1.5%;

反之亦然。

希望这一切都有意义

关于html - 关于位置/像素/div/等等,我的 HTML 逻辑是否正确?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22622499/

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