CSS的float設置爲正確的，但浮動左

在此頁面：http://sneakersinsight.com/xml/adidas-nmd_xr1 CSS的float設置爲正確的，但浮動左

正如你可以看到Twitter的飼料被坐在旁邊的照片在那裏，因爲我試圖讓它浮到的右側與照片具有相同間距的頁面在左側。

Twitter的飼料的CSS是這樣的：

.preview-twitter { 
margin: 0; 
padding: 0; 
position: relative; 
float: right; 
right:0; 
margin-top: 5%; 
margin-bottom: 3%; 
width: 40%; 
padding-top: 1%; 
padding-bottom: 1.38%; 
display: inline-block; 
background: #373737;}

左圖的CSS是這樣的：

.item-preview { 
position: relative; 
margin-top: 5%; 
margin-bottom: 3%; 
left: 4%; 
width: 40%; 
border: 10px solid #373737; 
border-width: -moz-calc(50% - 10px); 
border-width: -webkit-calc(50% - 10px); 
border-width: calc(50% - 10px); 
display: inline-block; 
padding: 0;}

他們都包含在一個div，它的CSS是：

.preview-wrapper { 
display: flex; 
position: relative; 
overflow: auto; 
max-height: 42vw; 
min-height: 42vw;}

請讓我知道你是否需要任何其他信息來幫助。

謝謝！

來源

2016-12-03 Ashley

根據計算，它沒有任何浮點數。奇怪的。你檢查了'.preview-twitter'的計算值嗎？ –

@PraveenKumar我沒有想過，但是你是對的，那真的很奇怪。任何想法可能會造成這種情況？ – Ashley

神祕解決。重新加載頁面並找到答案。 –

這是因爲家長有：

display: flex;

取出display: flex，這也解答了爲什麼float沒有被應用到任何孩子。

您需要刪除flex在兩個方面爲.preview-wrapper。兩者都在http://sneakersinsight.com/css/styles.css在線262。出於某種原因，它不是兩個，但是你的樣式表被加載了兩次。請檢查一下。

來源

2016-12-03 23:02:51

CSS的float設置爲正確的，但浮動左

回答

相關問題