Question

如果我想要以下布局：

[----foo-----][[-bar1-][bar2]]

即。两列各宽度一半，然后在第二列两个子列中用3/5和2/5分割，我做的事情如下：

<div>
  <div id="left-section" class="half-width">
     Foo <!-- lots of content -->
  </div>
  <div id="right-section" class="half-width">
     <div id="three-fifths-of-this-section" class="three-fifths-width">
          Bar1 <!-- lots of content -->
     </div>
     <div id="two-fifths-of-this-section" class="two-fifths-width">   
          Bar 2 <!-- lots of content -->
      </div>
  </div>  
</div>

使用以下CSS

div {
    display: inline-block;
}

@media screen and (min-width: 48em) {
  .half-width {
    width: 50%;
    *width: 49.9690%;
  }


  .three-fifths-width {
    width: 60%;
    *width: 59.969%
  }

  .two-fifths-width {
    width: 40%;
    *width: 39.9690%;
  }
}

为什么three-fifths-width类计算为屏幕宽度的60％（而two-fifths-width为整个屏幕的40％）？它只是一个常规的CSS width属性，应该是父元素的60％（或40％），因此屏幕的30％（10％分别）实践。

顺便说一下，我实际上在实践中使用PureCSS，但我对底层CSS感兴趣。

此外，我知道min-width查询中的@media始终与屏幕相关，我询问的是常规width甚至min-width作为@media查询范围内的CSS规则。

Answer 1

我不确定您的浏览器如何呈现您的输出，但首先它不应该接近60％甚至30％，因为您应用了

display: inline-block;

所有 div元素。

这会导致两件事：（1）你的div只会显示其内容所需的宽度;（2）内联元素之间的空格可能会产生不良影响。因此，您的示例如下所示：http://jsfiddle.net/8jrewj71/。

请注意，我已经添加了两次代码，并将不同的类应用于父div，以查看您在媒体查询中的CSS之间的差异。

现在，如果我们添加

.media, .nomedia { display: block; }

我们得到完整的不同图片：http://jsfiddle.net/n4aw8pcd/

只要预览/结果窗口足够小，媒体查询部分就像之前一样。但是，一旦视口超过48em，它看起来与下面没有媒体查询的部分完全相同。

长话短说：问题的答案一定是，但事实并非如此。 width: 100%;与具有width属性的下一个父元素相关。

为什么宽度：在媒体查询中相对于屏幕100％

1 个答案: