3

我有一个问题，我无法在 css 中解决。在图像滑块的底部，我有三个圆圈，但它们需要有点响应，以便笔记本电脑上从 13' 到 21' 的每个人都能看到它们的确切位置。但是当我调整屏幕大小时，这些圆圈会松动它们的位置，并且会被放置得更高或更低。这是我正在谈论的示例，当您调整屏幕大小时，您会看到圆圈不在图像底部的原始位置。 我正在为此努力。我的代码如下：

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

2 回答 2

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;

}

您仍然应该为整个站点添加一个“最小宽度”属性。

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

于 2013-07-15T13:03:08.013 回答
0

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

于 2013-08-27T20:43:57.140 回答