Question

我正在尝试构建一个按钮栏组件，其中可以有可变数量的按钮。我可以做任何我需要包装这些按钮等的东西，但我需要能够根据div内的百分比宽度来调整按钮的大小。由于我将flash移植到html5，我需要能够指定这个百分比宽度，并在按钮之间放置1-10像素的间隙，具体取决于实现。由于传统组件引擎的工作方式，按钮本身应该具有边框等内容，所有常用属性和按钮都需要绝对定位。

是否有任何方法通过html / css的某种组合来创建％宽度，并按％宽度内的像素减小每个按钮的大小？我意识到这可以使用显式值和jQuery轻松解决，但由于与动态调整大小/补间相关的许多复杂原因，我强烈希望让css处理定位。

我在下面开始了一个小提琴：

http://jsfiddle.net/maKuG/

Answer 1

这是一个相当肮脏的解决方案，但我通常只是在这些情况下使用绝对定位。例如：

#elmt1 {
    position: absolute;
    left: 0;
    width: 300px;
}
#elmt2 {
    position: absolute;
    left: 300px;
    right: 50%; /* Half way on the page */
}
#elmt3 {
    position: absolute;
    left: 50%;
    right: 0;
}

Answer 2

根据我的经验，％定义永远不会在所有流行的浏览器中按预期工作......但是只需在中间添加一些填充或边距，以确保两个按钮之间的间隔为10px，同时保持％定义的布局。两个按钮的示例css：

<style type="text/css">
    .button1 {
        padding-right: 5px;
    }
    .button2 {
        padding-left: 5px;
    }
</style>

<table width=500 height=50 cellpadding=0 cellspacing=0 border=0>
    <tr>
        <td width=50%><div class="button1"> </div></td>
        <td width=50%><div class="button2"> </div></td>
    </tr>
</table>

然后在你的html表格中，给每个按钮一个单元格，每个父容器的宽度为50％。

要回答问题的第二部分，最好的选择是javascript中的浏览器嗅探器。获取屏幕尺寸，进行计算并相应地调整元素大小。你不能在css中定义％减去像素。

Answer 3

我在这里找到了一般答案：CSS 100% height with padding/margin

并将其应用于我的案例：

<div id="buttonBar">
    <div class="buttonWrapper">
        <div class="innerWrapper"><button>My Button</button></div>
    </div>
    <div class="buttonWrapper" style="left:33.333%;" >
        <div class="innerWrapper"><button>My Button</button></div>
    </div>
    <div class="buttonWrapper" style="left:66.666%">
        <div class="innerWrapper"><button>My Button</button></div>
    </div>
</div>

CSS ::

*{
  position:absolute;
}

div#buttonBar{
 width: 300px;
 height: 35px;
 background: #933;
}

div.buttonWrapper{
  width: 33.333%;
  height: 35px;

}

button{
  display: block;
  width: 100%;
  height: 100%;
  border: 6px solid #333;
  background: #eee;
}
div.innerWrapper{
    bottom:0;
    top:0;
    left:0;
    right:0;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
}

有很多包装正在进行，但那部分不会干扰我的架构。以下是其工作的示例：

编辑：看起来我之前有错误版本的链接，更新链接如下： http://jsfiddle.net/hyperthalamus/maKuG/32/

感谢所有建议。

将基于百分比的宽度与基于像素的间隙混合？

3 个答案: