像素边框和百分比宽度在比例 [英] Pixel Border and Percentage width in Proportion

问题描述

我想我可能已经知道这个答案，但我需要一个健全检查！

说我有

  #gridtest {
 width：590px; 
} 
  

我可以使用RESULT = TARGET / CONTEXT将宽度更改为百分比。在这种情况下，上下文是一个max-width设置为1000px的容器，因此我可以这样做：

  #gridtestpercent {
 width：59％; / * 590/1000 * / 
} 
  

div将总是与其容器的比例。但如果我想做，如果

  #gridtest {
 width：570px; 
 border：10px solid red; 
} 
  

我可以根据现在的目标570的宽度工作，窗口缩小，所有比例都不同步。

  #gridtestpercentnoborder {
 width：57％; / * 570/1000 * / 
 border：10px solid red; 
} 
  

我不能使用百分比边框。我不想使用JS来检查上下文，我不能使用CSS3框边界声明。

如果我想使用响应式网页设计中描述的技术，Ethan Marcotte，其中一切都相对于彼此收缩，如果使用边框，我会失去运气吗？ / p>

不幸的是，你出门了。

解决方案运气。解决这个问题的一个方法是使用一个包装器 div 来创建边框。因此，外部 div 将是57％（在您的示例中），背景是所需边框的颜色。然后，内部 div 的宽度为96％左右（使用确切的数字找到适合您的设计的边框）。

I think I might already know the answer to this one but I need a sanity check!

Say I have

#gridtest{
width:590px;
}

I could change the width to a percentage by using RESULT=TARGET/CONTEXT. In this case the context is a container with a max-width set to 1000px so I can do this:

#gridtestpercent{
width:59%; /*590/1000*/
}

If I were to shrink the window down the div would always be in the proportion to the its container. But what if I wanted to do

#gridtest{
width:570px;
border:10px solid red;
}

I can work the width out based on the target now being 570 but as the window is shrunk the proportions all go out of sync.

#gridtestpercentnoborder{
width:57%; /*570/1000*/
border:10px solid red;
}

I can't use percentage border. I don't want to use JS to keep checking the context and I can't use the CSS3 box-border declaration yet.

If I wanted to use the technique described in responsive web design by Ethan Marcotte where everything shrinks in relation to each other would I be out of luck if using a border?

Cheers!

解决方案

Unfortunately, yes, you're out of luck. One hacky way to get around this problem is with a wrapper div that you use to create your border. So the outside div would be 57% (in your example) with a background that is the color of your desired border. Then, the inner div would have a width of 96% or so (play with the exact number to find a border that is appropriate for your design).

这篇关于像素边框和百分比宽度在比例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！