相对位置浏览器的差异，绝对作品，但没有流程

我正在尝试做一个购物车的布局，我很难得到复选框出现在正确的位置。这里的代码：相对位置浏览器的差异，绝对作品，但没有流程

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

呈现错上的jsfiddle本身和Internet Explorer/Firefox的......它看起来正确的表达幅面4和铬。应该是每种颜色旁边的复选框。

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

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

来源

2012-01-24 Lorof

我很惊讶，没有人提到行高！浏览器在线路高度上存在差异，这就是为什么相对定位显示不同但绝对有效！

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

编辑：好它并不容易..我现在用绝对...

来源

2012-01-25 16:35:46 Lorof

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

但是，您可以绝对定位div，如果它们与图像位于同一个容器中。只需相应地更改left值。由于图像将保留在流中，因此容器将被固定到图像的高度。

来源

2012-01-24 21:13:10 mreq

是的，我明白，但我的问题是没有高度的复选框的容器的宽度.. 。如果复选框标签很长，它应该展开。如果我指定容器的宽度，那么一切正常......我只是认为可能有更简单的方法来实现这一点。 – Lorof

你应该设置一个固定的宽度。如果你不满意，你将不得不使用JavaScript来计算宽度。 – mreq

如果你设置div正常显示为块并给它们适当的'padding's（尽管每个块都有所不同，它不应该是一种痛苦，因为无论如何你都会计算'top'不得不）。希望你明白了。如果没有，评论。 – mreq

将复选框旁边的文本包装在标签中。更多的语义+容器div将有足够的高度不丢失流量，以便您可以将复选框绝对放在其中。

来源

2012-01-24 21:19:43 Ege

谢谢你提醒我关于标签。 – Lorof

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

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

<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和定义背景位置，这取决于图像复选框配对。

来源

2012-01-24 21:31:06

相对位置浏览器的差异，绝对作品，但没有流程

回答

相关问题