相关疑难解决方法(0)

我使用以下方法在css中创建垂直对齐方式

.base{
        background-color:green;
	    width:200px;
	    height:200px;
	    overflow:auto;
	    position:relative;
	}

    .vert-align{
		padding-top:50%;
		height:50%;
	}

并使用以下div结构.

<!-- and used the following div structure. -->

    <div class="base">
       <div class="vert-align">
    	   Content Here
       </div>
    </div>

虽然这似乎适用于这种情况,但我感到惊讶的是,当我增加或减少我的基础div的宽度时,垂直对齐会突然.我期待当我设置padding-top属性时,它将填充占父容器高度的百分比,这在我们的情况下是基数,但是上面的50%的值是以百分比计算的.宽度.:(

有没有办法将填充和/或边距设置为高度的百分比,而无需使用JavaScript？

如果你看一下CSS盒子模型规范,你会看到以下内容:

[margin]百分比是根据生成的框的包含块的宽度计算的.请注意,对于"margin-top"和"margin-bottom"也是如此.如果包含块的宽度取决于此元素,则在CSS 2.1中未定义结果布局. (强调我的)

这确实是事实.但为什么呢？究竟是什么迫使任何人以这种方式设计它？你可以很容易地想到你想要的场景,比如某个东西总是从页面顶部降低25%,但是很难想出为什么你想要垂直填充相对于水平大小的父母.

这是我所指的现象的一个例子:

<div style="border: 1px solid red; margin: 0; padding: 0; width: 200px; height: 800px;">
  This div is 200x800.
  <div style="border: 1px solid blue; margin: 10% 0 0 10%;">
    This div has top-margin of 10% and left-margin of 10% with respect to its parent.
  </div>
</div>

http://jsfiddle.net/8JDYD/

这是一个例子:

http://jsfiddle.net/QZAd8/1/

注意所有的红色div是如何相同height而且有padding-top:100%;,但它们A和B有不同的填充大小......并且看起来父级的宽度改变了这个值(注意C改变height了父级,但是没有不要改变填充物.

为什么padding以这种方式与宽度相关？

编辑:由于历史原因,如果jsfiddle消失,我在我的例子中使用的代码如下...

.outer {
  background-color: green;
  height: 300px;
  width: 70px;
  float: left;
  margin-right: 10px;
}

.middle {
  background-color: red;
  height: 100px;
  width: 50px;
  padding-top: 100%;
}

.inner {
  background-color: blue;
  height: 3px;
  width: 100%;
}

<div class='outer'>
  <div class='middle'>
    A
    <div class='inner'>
    </div>
  </div>
</div>

<div class='outer' style='width:100px'>
  <div class='middle'>
    B
    <div class='inner'>
    </div>
  </div>
</div>

<div class='outer' style='height:400px'>
  <div class='middle'>
    C
    <div class='inner'>
    </div>
  </div>
</div>

我正在开发一个项目,客户希望导航<div>根据屏幕高度进行对齐,类似于margin-left屏幕宽度减小时百分比的工作方式.

所以,我给了margin-top: 20%导航<div>显示边距,但是当我减小窗口的高度时,它不会根据屏幕高度调整,尽管它在我减小屏幕宽度时起作用.

我的问题不是如何实现这一目标,而是为什么百分比水平而非垂直？

这是一个例子:http://jsfiddle.net/sandeep/5VReY/