html - 定位没有绝对的div图像

Question

好吧，我有一个小问题，我无法解决。希望高手帮忙:)

如您所见，我的索引站点上有 3 个 div。中间的No是一个跨页眉和主div的输入。黄色圆圈是带有图像的 div*

关于 div 图像......他们的代码是位置是随机的，不像我做的那样相等。HTML 和 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;
}

<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>

所以我的问题是，当调整窗口大小时，它会变成 div1，它们会相互交叉。我也需要让它负责，但是当使用移动设备时，我需要它们消失，而当在较小的显示器上时，我需要它们调整尺寸以显示。定位是否合适，还是我应该使用 float？

Answer 1

你的问题很困惑，但我想你想要的是这样的:

In 可以使用媒体查询毫无问题地调整大小。这是 mdn 的链接:https://developer.mozilla.org/en-US/docs/Web/CSS/@media

您还可以为您的 div 使用 float:left 和 position:relative，为您的输入使用 position:absolute。

这是我的 HTML 和 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 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>

我猜你的类(class)“圈子”没有按照你的意愿行事，然后我评论了它(尝试用它来检查)。

对于 div > input 和 input 标签，您可以使用媒体查询来正确调整输入的大小。

这是我的 jsfiddle:http://jsfiddle.net/dhvuakjr/

Ps.: 是position 不是positionate 就像你写的class circle

希望对你有帮助。