Question

我正在尝试制作购物车布局，并且很难让复选框出现在正确的位置。代码在这里：

http://jsfiddle.net/35Hkj/1/

在jsfiddle本身和internet explorer / firefox上呈现错误......它在表达式web 4和chrome中看起来是正确的。应该是每种颜色旁边的复选框。

如果我在相对容器中放置一个带绝对值的复选框，它可以在所有浏览器上完美地工作，但会丢失流量，这意味着它不会动态扩展div容器。

有没有办法确定绝对位置（相对于父级）而不会丢失流量？我猜测用css切割图像并在每个切片部分旁边放置一个复选框是不正确或不容易的。

Answer 1

绝对位置绝对会“失去流量”。

但是，如果div与图像位于同一容器中，则可以绝对定位div。只需相应更改left值即可。当图像保留在流中时，容器将被拉伸到图像的高度。

Answer 2

将标签旁边的复选框旁边的文字换行。更多语义+容器div将具有足够的高度，不会丢失流量，因此您可以绝对定位复选框。

Answer 3

具有position:absolute的元素总是从相关元素的常规流中取出。

你可以做的是使用精灵作为背景图像。将您的复选框和图像放在float:left和float:right div中，或者将它们都向左浮动并在它们之间保留边距并修改精灵的背景位置。如果你想，你也可以使用图像，但我觉得使用精灵会更快。例如。

<div>
    <div class='item'>
        <div class='image'>
            <img alt="" src="http://www.ahornblume.ch/images/img1.jpg" />
        </div>
        <div class='checkbox'>
            <input name="product1[]" type="checkbox" value="skin" />skin
        </div>
    </div>
    <div class='item'>
        <div class='image'>
            <img alt="" src="http://www.ahornblume.ch/images/img2.jpg" />
        </div>
        <div class='checkbox'>
            <input name="product1[]" type="checkbox" value="face" />face
        </div>
    </div>
</div>

.item{
    float:left;
    width:auto;
}

.image{
    float:left;
    width:auto;
}

.checkbox{
    float:right;
    width:auto;
}

如果你想使用精灵，你可以给每个div id并定义一个背景位置，具体取决于图像 - 复选框配对。

Answer 4

我很惊讶没有人提到行高！线高度存在浏览器差异，这就是相对定位看起来不同但绝对有效的原因！

只需在css中设置行高，它在所有浏览器中看起来都完全一样！

编辑：好吧，这不容易......我现在正在使用绝对...

相对位置浏览器差异，绝对有效，但没有流量

4 个答案: