無需絕對定位div圖像

好吧我有一個小問題，我無法解決。我希望專家將幫助:)無需絕對定位div圖像

index site

正如你可以看到我有我的網站的索引3周的div。中間沒有一個是跨標題和主div的輸入。而黃色圓圈是divs，但圖像*

關於div圖像...他們的代碼是位置是隨機的，不像我所做的那樣。 HTML

<div id="container"> 
<div id="apple_img" class="circle"></div> 
<div id="weight_img" class="circle"></div> 
<div id="bike_img" class="circle"></div> 
</div>

CSS

#container{position:relative;} 

.circle{border-radius:50%; 
width:127px; 
height:127px 
positionate:absolute; 
} 
#apple_img{ 
background-image:url(../images/sprite.png); 
background-position: some pixels; 
top:-5px; 
left:15px; 
} 
#weight_img{ 
background-image:url(../images/sprite.png); 
background-position: some pixels; 
top:30px; 
left:80px; 
} 
#bike_img{ 
background-image:url(../images/sprite.png); 
background-position: some pixels; 
top:100px; 
left:20px; 
}

所以我的問題是重新大小的窗口就會去爲DIV1的時候，它們會彼此交叉走。我也需要讓它負責，但是當使用移動設備時，我需要它們消失，當在較小的顯示器上時，我需要它們調整它們的尺寸以顯示。定位好還是應該用float？

來源

2015-02-24 FiN

如果你想讓絕對定位的div甚至有點敏感...不要使用像素值...使用百分比。然後查看媒體查詢。 – 2015-02-24 12:47:26

它應該更好％或em-s？ – FiN 2015-02-24 12:49:09

我真的希望你能以更精細的方式解釋你需要什麼。我不知道你在問什麼。 – Alexey 2015-02-24 13:01:01

你的問題很混亂，但我猜你想是這樣的：

在不使用媒體查詢的問題調整。這裏是MDN的鏈接：https://developer.mozilla.org/en-US/docs/Web/CSS/@media

您也可以使用您的div float:left和position:relative和position:absolute您的輸入。

這裏是我的HTML代碼：

<div id="container"> 
    <div id="apple_img" class="circle"></div> 
    <div id="weight_img" class="circle"></div> 
    <div id="bike_img" class="circle"></div> 
    <div><input type="text" value="Type here"></div> 
</div>

這裏是我的CSS代碼：

.circle { 

} 
#apple_img { 
    background:green; 
    width:100%; 
    height:100px; 
    float:left; 
    position:relative; 
} 
#weight_img { 
    background:red; 
    width:100%; 
    height:100px; 
    float:left; 
    position:relative; 
} 
#bike_img { 
    background:blue; 
    width:100%; 
    height:100px; 
    float:left; 
    position:relative; 
} 
/* use media query here to other resolutions >768px and <=768px for example */ 
div > input{ 
    width:200px; 
    height:200px; 
    position:absolute; 
    left:50%; 
    margin-left:-100px; 
    top:50px 
} 

input{ 
    width:200px; 
    height:200px; 
    position:relative; 
    float:left; 
}

我猜你的類「圓」是不是做你想要什麼，然後我評論它（嘗試用它來檢查）。

對於標籤div > input和input，您可以使用媒體查詢來正確調整輸入大小。

這裏是我的jsfiddle：http://jsfiddle.net/dhvuakjr/

詩篇：它的位置，而不是像positionate你寫你的類圓形

希望這有助於你。

來源

2015-02-24 13:17:16

無需絕對定位div圖像

回答

相關問題