像素不完美布局

huangapple
go评论106阅读模式
英文:

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <title>widthtest</title>
  5. <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0">
  6. <style>
  8. html, body {
  9. border: 0;
  10. height: 100%;
  11. margin: 0;
  12. padding: 0;
  13. box-sizing: border-box;
  14. font: normal 16px/16px Arial;}
  16. main {
  17. background: #000;
  18. height: 600px;
  19. margin: 25px;
  20. width: 600px;
  21. }
  23. #left, #right {
  24. display: inline-block;
  25. height: 300px;
  26. width: 300px;
  27. }
  29. #left {
  30. background: #cfc;
  31. }
  33. #right {
  34. background: #ccf;
  35. }
  37. </style>
  38. </head>
  40. <body>
  42. <main>
  43. <div id="left">
  44. </div>
  45. <div id="right">
  46. </div>
  47. </main>
  49. </body>
  50. </html>

答案1

得分: 2

这是由于空白间隙引起的。如果删除所有div之间的空白，您将获得所需的像素完美结果。

  1. <!-- begin snippet: js hide: false console: true babel: false -->
  3. <!-- language: lang-css -->
  4. html, body {
  5. border: 0;
  6. height: 100%;
  7. margin: 0;
  8. padding: 0;
  9. box-sizing: border-box;
  10. font: normal 16px/16px Arial;}
  12. main {
  13. background: #000;
  14. height: 600px;
  15. margin: 25px;
  16. width: 600px;
  17. }
  19. #left, #right {
  20. display: inline-block;
  21. height: 300px;
  22. width: 300px;
  23. }
  25. #left {
  26. background: #cfc;
  27. }
  29. #right {
  30. background: #ccf;
  31. }
  33. <!-- language: lang-html -->
  34. <main>
  35. <div id="left">
  37. </div><div id="right">
  39. </div>
  40. </main>
  42. <!-- end snippet -->

然而，我认为更好的方法是使用Flexbox。

  1. <!-- begin snippet: js hide: false console: true babel: false -->
  3. <!-- language: lang-css -->
  4. html, body {
  5. border: 0;
  6. height: 100%;
  7. margin: 0;
  8. padding: 0;
  9. box-sizing: border-box;
  10. font: normal 16px/16px Arial;}
  12. main {
  13. display: flex; /* <- */
  14. background: #000;
  15. height: 600px;
  16. margin: 25px;
  17. width: 600px;
  18. }
  20. #left, #right {
  21. /* display: inline-block; */ /* <- */
  22. height: 300px;
  23. width: 300px;
  24. }
  26. #left {
  27. background: #cfc;
  28. }
  30. #right {
  31. background: #ccf;
  32. }
  34. <!-- language: lang-html -->
  35. <main>
  36. <div id="left">
  37. </div>
  38. <div id="right">
  39. </div>
  40. </main>
  42. <!-- 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 -->

  1. html, body {
  2. border: 0;
  3. height: 100%;
  4. margin: 0;
  5. padding: 0;
  6. box-sizing: border-box;
  7. font: normal 16px/16px Arial;}
  9. main {
  10. background: #000;
  11. height: 600px;
  12. margin: 25px;
  13. width: 600px;
  14. }
  16. #left, #right {
  17. display: inline-block;
  18. height: 300px;
  19. width: 300px;
  20. }
  22. #left {
  23. background: #cfc;
  24. }
  26. #right {
  27. background: #ccf;
  28. }

<!-- language: lang-html -->

  1. &lt;main&gt;
  2. &lt;div id=&quot;left&quot;&gt;
  4. &lt;/div&gt;&lt;div id=&quot;right&quot;&gt;
  6. &lt;/div&gt;
  7. &lt;/main&gt;

<!-- 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 -->

  1. html, body {
  2. border: 0;
  3. height: 100%;
  4. margin: 0;
  5. padding: 0;
  6. box-sizing: border-box;
  7. font: normal 16px/16px Arial;}
  9. main {
  10. display: flex; /* &lt;- */
  11. background: #000;
  12. height: 600px;
  13. margin: 25px;
  14. width: 600px;
  15. }
  17. #left, #right {
  18. /* display: inline-block; */ /* &lt;- */
  19. height: 300px;
  20. width: 300px;
  21. }
  23. #left {
  24. background: #cfc;
  25. }
  27. #right {
  28. background: #ccf;
  29. }

<!-- language: lang-html -->

  1. &lt;main&gt;
  2. &lt;div id=&quot;left&quot;&gt;
  3. &lt;/div&gt;
  4. &lt;div id=&quot;right&quot;&gt;
  5. &lt;/div&gt;
  6. &lt;/main&gt;

<!-- 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.

像素不完美布局

huangapple
  • 本文由 发表于 2023年6月8日 13:09:39
  • 转载请务必保留本文链接：https://go.coder-hub.com/76444340.html
  • css
  • html
  • layout
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定