在 CSS 中计算 Pixel 和 % 的更好方法(或替代方法)?

发布于 2024-08-15 14:31:00 字数 269 浏览 2 评论 0原文

我并不是说我懒惰做数学,而是有更好的方法来执行这项任务: 我有一个宽度为960px的页面,里面有2个宽度为50%的div。这很简单,但是如果我想添加 1px 边框,我必须计算 960/0.5 减去边框的额外像素,它们应该是 4px,但奇怪的是它们被算作 2px(2 个 div 的左侧和右侧,对吗?)。另外,当我添加边距和填充时,我必须重新计算所有内容。假设我添加 10px 边距,我必须将 % 转换为 px,有时它会给我带来烦人的数字,例如 760.25px。我想知道您是否使用了更好的方法,或者是否没有必要这样做。谢谢。

I'm not saying that I'm lazy to do math, but is there a better way to perform this task:
I have a page that with width: 960px, inside it has 2 divs that are width: 50%. That's quite simple, but if I want to add 1px border I have to calculate 960/0.5 minus the extra pixels of the borders, they should be 4px but strangely they are counted as 2px (left and right side of 2 divs right?). Also, when I add margin and padding I have to calculate everything again. Lets say I add 10px margin, I have to convert the % to px and sometimes it gives me annoying numbers like 760.25px. I would like to know if you are using a better approach or if its unnecessary to do it like this. Thanks.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

一笔一画续写前缘 2024-08-22 14:31:00

如果您使用容器的固定宽度,为什么要使用 % 作为内部 DIV。除非你使用百分比,否则它没有任何意义。当然,您可以使用 box-sizing,但它会损害旧版浏览器。

If you use fixed width of the container, why would you use % for inner DIV's. It does not make any sense unless you use percents. Sure you can use box-sizing, but it will hurt older browsers.

走过海棠暮 2024-08-22 14:31:00

您可以添加更多元素来调整大小:

<div style="width:960px;overflow:hidden;">
  <div style="float:left;width:50%;">
    <div style="margin:5px;border:1px solid #000;padding:5px;"></div>
  </div>
  <div style="float:left;width:50%;">
    <div style="margin:5px;border:1px solid #000;padding:5px;"></div>
  </div>
</div>

您可以对没有边距、边框或填充的元素使用百分比,并且可以对内部具有自动宽度的元素使用边距、边框和填充。

You can add more elements for sizing:

<div style="width:960px;overflow:hidden;">
  <div style="float:left;width:50%;">
    <div style="margin:5px;border:1px solid #000;padding:5px;"></div>
  </div>
  <div style="float:left;width:50%;">
    <div style="margin:5px;border:1px solid #000;padding:5px;"></div>
  </div>
</div>

You can use percentages for element with no margin, border or padding, and you can use margin, border and padding on the elements inside that has auto width.

壹場煙雨 2024-08-22 14:31:00

box-sizing CSS 属性(如果你不关心 IE<8)

box-sizing CSS property (if you dont care about IE<8)

短叹 2024-08-22 14:31:00

如果您的“div”有背景图像,您可以通过将边框集成到背景图像中来进行破解。

但是,如果您的“div”具有固定宽度,您应该计算宽度,以免其他网络浏览器出现意外。

If your "divs" have a background image, you can hack by integrate the border in the background image.

But if your "divs" have a fixed width, you should calculate width in order to have no surprises with other web-browsers.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文