Question

我有一个问题，我无法弄清楚css。在图像滑块的底部，我有三个圆圈，但它们需要有点响应，以便从13'到21'的笔记本电脑上的每个人都能看到它们的确切位置。但是当我调整屏幕大小时，这些圆圈会松开它们的位置并放置得更高或更低。 Here is the example我说的是，当你调整屏幕大小时，你会看到圆圈位于原始的好位置，位于图像的底部。 I am working towards this。我的代码如下：

CSS

.bxslider {

margin: 0; 
padding:0;  

}

#bijschrift {

position: relative;
left: 65%;
height: auto;
bottom: 250px;
float: left;    
z-index: 9999;
}

#bijschrifthoofd {  
z-index: 9999;
opacity: 0.8;
padding-left: 10px;
padding-right: 10px;
    background-color: #212121;
}
#bijschrifthoofd span {
    width:  auto;
        color: white;
    font-family: 'Open Sans', sans-serif;
font-weight: 500;
line-height: 45px;
font-size: 150%;

}
#bijschriftonder {
z-index: 9999;
opacity: 0.8;
margin-top: 10px;
padding-left: 10px;
padding-right: 10px;
    background-color: #212121;
    float: left;
}
#bijschriftonder span {
    width: auto;
        color: white;
    font-family: 'Open Sans', sans-serif;
font-weight:100;
line-height: 45px;
font-size: 22px;

}
#cirkelcontainer {
width: 100%;
height: auto;
position: relative;
bottom: 200px;
z-index: 9999;
display: block;

}
.circle
{
    display:table-cell;
width:80px;
height:80px;
border-radius:40px;
font-size:16px;
color:white;
vertical-align: top;
text-align:center;
background:#00ccff;
float: left;

font-family: 'Open Sans', sans-serif;
font-size: 22px;
line-height: 80px;
}
.circle2 {
    display:table-cell;
    margin-left: 2%;
    z-index: 9999;
width:80px;
height:80px;
border-radius:40px;
font-size:16px;
color:white;
vertical-align: top;
text-align:center;
background:#e05c50;
float: left;

font-family: 'Open Sans', sans-serif;
font-size: 22px;
line-height: 80px;
}
.circle3 {
    display:table-cell;
    margin-left: 10%;
    z-index: 9999;
width:80px;
height:80px;
border-radius:40px;
font-size:16px;
color:white;
vertical-align: top;
text-align:center;
background:#0099cc;
float: left;

font-family: 'Open Sans', sans-serif;
font-size: 22px;
line-height: 80px;
}

HTML

<ul class="bxslider" >
  <li><img src="fotos/Untitled-5.jpg" title="Funky roots" /></li>
  <li><img src="fotos/Untitled-4.jpg" title="The long and winding road" /></li>
  <li><img src="fotos/Untitled-3.jpg" title="Happy trees" /></li>

</ul>
<div id="bijschrift">
<div id="bijschrifthoofd"><span>UW SPRINGPLANK NAAR INSPIRATIE</span></div>
<div id="bijschriftonder"><span>En authentieke waterpret</span></div>
</div>
<div style="clear:both"></div>
<div id="cirkelcontainer">
    <div class="circle">O</div>
    <div class="circle2">IB</div>
    <div class="circle3">T</div>
</div>

</body>
</html>

Answer 1

我不确定圈子的“确切位置”在哪里。我假设它在底部的图像上，就像这样：

http://jsfiddle.net/Y65mW/1/

所以我改变了圈子Html：

 <div id="circle1" class="circle">O</div>

和Css所以我们可以使用单个圆形样式定义：

.circle {
  position: absolute;
  width:80px;
  height:80px;
  border-radius:40px;
  ...
}
#circle1 {
  left: 60px;
  background:#00ccff;

}

您仍然应该为整个网站添加'min-width'属性。

我在此更新了解决方案http://jsfiddle.net/Y65mW/3/embedded/result/

Answer 2

解决方案非常明显：我必须将圆圈定位到绝对位置，这样才不会影响下一个div的位置，并为其添加“margin-left：-width px”。在这种情况下：“margin-left：-50px;”。

使css圆圈在图像的底部响应并处于固定位置

2 个答案: