图像是目标。我需要在方框内正确定位每种颜色。它还必须位于浏览器的中心。我得到的结果正是图像只是文字。我真的在寻找一种更好的方法来做到这一点，因为我不得不猜测左边和底部的像素。我也知道它可以做得更好，并且真的很想学习如何做。
.border{
border: 2px solid black;
width: 500px;
height: 700px;
margin:25px 450px;
padding: 1px;
}
#one {
background: red;
height:100px;
}
#two{
background: yellow;
height:600px;
width:100px;
}
#three {
background: blue;
height:550px;
width:300px;
position: relative;
left: 100px;
bottom: 600px;
}
#four{
background: yellow;
height: 600px;
width:100px;
position: relative;
left:400px;
bottom: 1150px;
}
#five{
background: green;
height:50px;
width:300px;
position: relative;
left: 100px;
bottom: 1200px;
} <div class="border">
<div id="one">One</div>
<div id="two">Two</div>
<div id="three">Three</div>
<div id="four">Four</div>
<div id="five">Five</div>
</div>最佳答案
我个人会选择使用 percentage-based measurements ，这样你只需要更新 width 和 height 在 .border 本身。对于 .border，我选择了 vw and vh units 分别用于 width 和 height，以便表格的大小根据视口(viewport)的大小进行调整。
请注意，您可能还希望使用类而不是 ID，这样您就可以拥有多个表。我在示例中使用了类，还替换了名称以使位置标识符更加明显。
我还选择为 #middle 和 #bottom 元素创建一个容器，将它们视为单个“列”。这样，您就可以利用 float 来对齐 #left、#middle_container 和 #right 列无需担心 #bottom 的 width。
您可以通过添加 margin: 0 auto 使整个内容居中 到 .border，这是声明不应该有任何垂直边距的简写，并且应该自动计算水平边距(它使相关元素水平居中)。
这可以从以下方面看出:
.border {
border: 2px solid black;
width: 50vw;
height: 100vh;
padding: 1px;
margin: 0 auto;
}
.top {
background: red;
width: 100%;
height: 20%;
}
.left,
.middle_container,
.right {
float: left;
}
.left {
background: yellow;
width: 20%;
height: 80%;
}
.middle_container {
width: 60%;
height: 80%;
}
.middle {
background: blue;
height: 80%;
}
.bottom {
background: green;
height: 20%;
bottom: 0;
}
.right {
background: yellow;
width: 20%;
height: 80%;
}<body>
<div class="border">
<div class="top">Top</div>
<div class="left">Left</div>
<div class="middle_container">
<div class="middle">Middle</div>
<div class="bottom">Bottom</div>
</div>
<div class="right">Right</div>
</div>
</body>希望对您有所帮助! :)
关于html - 有没有人有更好的方法来做到这一点？我只是在学习如何使用 CSS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47686170/