Question

我在响应流体页面的特定部分遇到了一些问题，我正在尝试为平板电脑维度构建，现在将960px转换为96％容器的大小。

要查看问题所在，可在此处找到：http://shopper.izigo.pt/vote/

按钮中的箭头图形图像不是所有元素的其余部分，如果我尝试更改为肖像的方向，箭头会变小。我已根据目标％上下文进行了计算，但在这种特殊情况下它不起作用（这是代码）：

的CSS：

main form button img {
    float: right;
    width: 12.3943661971831%;           /* 44px current element size % 355px parent (button) size */
    margin-right: 2.8169014084507%;     /* 10px current element size % 355px parent (button) size  */
    margin-top: 3.09859154929577%;      /* 11px current element size % 355px parent (button) size  */
}

页脚没有居中（这是代码）：

的CSS：

footer {
    position: absolute;
    bottom: 30px;
    width: 96%;     /* equal to the containers width because it's in a absolute position */
}

Answer 1

我认为按钮内的img实际上是造型，而不是内容。因此它属于您的CSS作为背景图像，而不是作为img在您的html中。这也使定位更容易：

main form button {
    background: url(path/to/image.png) no-repeat right center;
    padding-right: 20px; /* width of image to prevent the label from laying on top of it */
}

（我可以建议您在该按钮上添加一个类并以此方式定位，而不是那些长，难以维护的，以及您现在使用的较慢的选择器）

对于页脚，您可以将右侧和左侧属性设置为0（当它位于绝对位置时），而不是定义宽度。这样它将接管父级的宽度。像这样：

footer {
    position: absolute;
    bottom: 30px;
    left: 0;
    right: 0;
}

两者都应该在流体设计中正常工作......

使用CSS响应流体设计将图像放在按钮中

1 个答案: