相對位置瀏覽器的差異，絕對作品，但沒有流程

我正在嘗試做一個購物車的佈局，我很難得到複選框出現在正確的位置。這裏的代碼：相對位置瀏覽器的差異，絕對作品，但沒有流程

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

相對位置瀏覽器的差異，絕對作品，但沒有流程

回答

相關問題