Html 定位div图像而不使用绝对值

好吧，我有个小问题，我解决不了。 我希望专家们能提供帮助：）

正如你所看到的，我的索引站点上有3个div。 中间没有一个输入跨越标题和主div。 黄色的圆圈是带有but图像的div*

关于div图像…他们的代码是 位置是随机的，不像我做的那样相等。 HTML

因此，我的问题是，当重新调整窗口大小时，它将作为div1，它们将相互交叉。我也需要让它负责，但当使用移动设备时，我需要它们去显示，当在较小的显示器上时，我需要它们调整大小以显示。

---

定位是否正确，或者我应该使用

float

？

您的问题非常令人困惑，但我猜您想要的是这样的：

在中，可以使用媒体查询调整大小而不会出现问题。 以下是mdn的链接：

您还可以对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;
}

.circle{
}
#苹果公司{
背景：绿色；
宽度：100%；
高度：100px；
浮动：左；
位置：相对位置；
}
#重量{
背景：红色；
宽度：100%；
高度：100px；
浮动：左；
位置：相对位置；
}
#自行车{
背景：蓝色；
宽度：100%；
高度：100px；
浮动：左；
位置：相对位置；
}
/*使用此处的“介质查询”可查询其他分辨率>768px并输入{
宽度：200px；
高度：200px；
位置：绝对位置；
左：50%；
左边距：-100px；
顶部：50px
}
输入{
宽度：200px；
高度：200px；
位置：相对位置；
浮动：左；
}

我猜你的类“圈”没有做你想做的，然后我对它进行了评论（试着用它来检查）

对于标签

div>input

和

input

，您可以使用媒体查询来正确调整输入的大小

这是我的JSFIDLE：

附言：这是位置，而不是像你写的班级圈子那样的位置

---

希望这能对您有所帮助。

如果您想让绝对定位的div甚至有轻微的响应…不要使用像素值…使用百分比。然后看看媒体查询。是%还是em-s更好？我真的希望你能更详细地解释一下你需要什么。我不知道你在问什么。主要的问题是作为div的圆…而不是输入…当显示大小改变时，我需要它们保持在相同的位置。。。

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

.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;
}