英文:
Pixel Imperfect Layout
问题
My layout is not obeying my commands.
我的布局没有遵循我的命令。
I had trouble with a layout so I created a new basic box with sub-boxes to see what's going on, and no matter what I do the two 300px boxes won't fit side-by-side into the 600px box.
我在布局方面遇到了问题，所以我创建了一个新的基本框，带有子框，以查看发生了什么，但无论我做什么，两个300px的框都无法并排放入600px的框中。
Also, when the 2nd 300px box is forced to a 2nd line there's an unexplained margin between it and the box above.
而且，当第二个300px的框被迫移到第二行时，它和上面的框之间有一个无法解释的边距。
I checked CSS & HTML validators and they presented no errors.
我检查了CSS和HTML验证器，它们没有显示任何错误。
Any insight to the cause of the annoyance would be greatly appreciated.
对于这个问题的原因的任何洞察都将不胜感激。
System:
Chrome: Version 114.0.5735.106 (Official Build) (64-bit)
Linux Mint 19.3 Cinnamon v:4.4.8, Kernel: 5.4.0-150-generic
(Potential) pebkac model: 1969
HTML代码已提供，无需翻译。
英文:
My layout is not obeying my commands.
I had trouble with a layout so I created a new basic box with sub-boxes to see what's going on, and no matter what I do the two 300px boxes won't fit side-by-side into the 600px box.
Also, when the 2nd 300px box is forced to a 2nd line there's an unexplained margin between it and the box above.
I checked CSS & HTML validators and they presented no errors.
Any insight to the cause of the annoyance would be greatly appreciated.
System:
Chrome: Version 114.0.5735.106 (Official Build) (64-bit)
Linux Mint 19.3 Cinnamon v:4.4.8, Kernel: 5.4.0-150-generic
(Potential) pebkac model: 1969
<!DOCTYPE html>
<html lang="en">
<head>
<title>widthtest</title>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0">
<style>
html, body {
border: 0;
height: 100%;
margin: 0;
padding: 0;
box-sizing: border-box;
font: normal 16px/16px Arial;}
main {
background: #000;
height: 600px;
margin: 25px;
width: 600px;
}
#left, #right {
display: inline-block;
height: 300px;
width: 300px;
}
#left {
background: #cfc;
}
#right {
background: #ccf;
}
</style>
</head>
<body>
<main>
<div id="left">
</div>
<div id="right">
</div>
</main>
</body>
</html>
答案1
得分: 2
这是由于空白间隙引起的。如果删除所有div之间的空白，您将获得所需的像素完美结果。
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
html, body {
border: 0;
height: 100%;
margin: 0;
padding: 0;
box-sizing: border-box;
font: normal 16px/16px Arial;}
main {
background: #000;
height: 600px;
margin: 25px;
width: 600px;
}
#left, #right {
display: inline-block;
height: 300px;
width: 300px;
}
#left {
background: #cfc;
}
#right {
background: #ccf;
}
<!-- language: lang-html -->
<main>
<div id="left">
</div><div id="right">
</div>
</main>
<!-- end snippet -->
然而，我认为更好的方法是使用Flexbox。
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
html, body {
border: 0;
height: 100%;
margin: 0;
padding: 0;
box-sizing: border-box;
font: normal 16px/16px Arial;}
main {
display: flex; /* <- */
background: #000;
height: 600px;
margin: 25px;
width: 600px;
}
#left, #right {
/* display: inline-block; */ /* <- */
height: 300px;
width: 300px;
}
#left {
background: #cfc;
}
#right {
background: #ccf;
}
<!-- language: lang-html -->
<main>
<div id="left">
</div>
<div id="right">
</div>
</main>
<!-- end snippet -->
英文:
This is due to the white space. If you remove all white space between the divs, you'll get your intended pixel-perfect result.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
html, body {
border: 0;
height: 100%;
margin: 0;
padding: 0;
box-sizing: border-box;
font: normal 16px/16px Arial;}
main {
background: #000;
height: 600px;
margin: 25px;
width: 600px;
}
#left, #right {
display: inline-block;
height: 300px;
width: 300px;
}
#left {
background: #cfc;
}
#right {
background: #ccf;
}
<!-- language: lang-html -->
<main>
<div id="left">
</div><div id="right">
</div>
</main>
<!-- end snippet -->
<br>However, I think a better way to go about this is to use Flexbox.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
html, body {
border: 0;
height: 100%;
margin: 0;
padding: 0;
box-sizing: border-box;
font: normal 16px/16px Arial;}
main {
display: flex; /* <- */
background: #000;
height: 600px;
margin: 25px;
width: 600px;
}
#left, #right {
/* display: inline-block; */ /* <- */
height: 300px;
width: 300px;
}
#left {
background: #cfc;
}
#right {
background: #ccf;
}
<!-- language: lang-html -->
<main>
<div id="left">
</div>
<div id="right">
</div>
</main>
<!-- end snippet -->
答案2
得分: 1
2个宽度为300像素的元素无法容纳在一个宽度为600像素的元素中。尝试将它们各自调整为295像素，然后您应该能够看到效果。然后您可以进行实验。
英文:
2 x 300px elements won't fit into a 600px element. Try making them 295px each and you should see it work. Then you can experiment.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论