相关疑难解决方法(0)

好吧,我一两周前有一个简单的布局问题.即页面的部分需要标题:

+---------------------------------------------------------+
| Title                                            Button |
+---------------------------------------------------------+

非常简单的东西.桌面仇恨似乎已经在Web世界中占据了,当我问为什么使用HTML表单的定义列表(DL,DD,DT)标签而不是表格时,我被提醒了？ 现在已经讨论过表vs divs/CSS的一般主题,例如:

• DIV vs Table ; 和
• 表而不是DIV.

因此,这不是关于CSS与布局表格的一般性讨论.这只是一个问题的解决方案.我使用CSS尝试了以上的各种解决方案,包括:

• 浮动按钮或包含按钮的div;
• 相对于按钮的位置; 和
• 位置相对+绝对.

由于各种原因,这些解决方案都不令人满意.例如,相对定位导致z-index问题,其中我的下拉菜单出现在内容下.

所以我最终回到:

<style type="text/css">
.group-header { background-color: yellow; width: 100%; }
.group-header td { padding: 8px; }
.group-title { text-align: left; font-weight: bold; }
.group-buttons { text-align: right; }
</style>
<table class="group-header">
<tr>
  <td class="group-title">Title</td>
  <td class="group-buttons"><input type="button" name="Button"></td>
</tr>
</table>

而且效果很好.它很简单,因为它具有向后兼容性(即使在IE5上也可以工作)并且它只是起作用.没有搞乱定位或花车.

所以任何人都可以做没有表的等价物吗？

要求是:

• 向后兼容:到FF2和IE6;
• 合理一致:跨越不同的浏览器;
• 垂直居中:按钮和标题具有不同的高度; 和
• 灵活:允许合理精确控制定位(填充和/或边距)和样式.

在旁注中,我今天看到了几篇有趣的文章:

• 为什么CSS不应该用于布局 …

是这样的可能在CSS？

<table>
  <tr>
    <td id="elementOne">elementOne</td>
    <td id="elementtwo">elementtwo</td>
  </tr>
</table>

<div style="width: calc(document.getElementById(elementOne).width)"></div>

因此div总是与宽度相同elementOne.

CSS中是否有这样的功能,使用calc()或其他方法？

我有一个div,我以负边距定位,但我希望它一直延伸到它的容器div的底部,所以我可以使用一个不仅随机结束的边框.如果你看一下http://kineticaid.com/k/home.php,你会明白我的意思.我不能仅以像素为单位扩展其高度,因为容器div的高度随页面动态变化.我想做的是这样的:

#rightcol {
float: right;
width: 225px;

height: 100% + 250px;

margin: -325px -25px 0 0;
}

基本上我问你是否可以在CSS中添加和减去.谢谢!

我的意思是,有没有办法做类似的事情:

width: 92%;
left: (100-width)/2;

所以我可以不用"左"而改变宽度？

obs.我不想知道其他做这种居中的方法,比如使用magins = auto,我只是想知道我是否可以使用css属性作为其他属性的值.谢谢!:)