奇怪的div定位

Question

我收到了HTML＆amp; 应该正常工作的CSS布局。但是，我遇到了一些奇怪的问题，我不确定它们为什么会出现。

在以下this website的底部，有一个滑块可以显示带有文字的几张照片，点击箭头可以滑动它们。问题是我既不能定位箭头，也不能定位包含图像的包装。

正如您所见，箭头（CSS类： .strelica-lijevo 和 .strelica-desno 目前位于图片包装器后面（CSS类： .slike -wrapper ）应该留下（.strelica-lijevo）或右（.strelica-desno）。

代码可以直接在网站上看到。任何帮助将不胜感激。

Answer 1

HTML和CSS存在一些问题 - 您应该尝试联系任何提供此滑块的人来获得实现它的支持，或者您可以自己尝试如下（只需检查标记和CSS，这可能有帮助）： 您当前的HTML：

<div class="w-clearfix main-content karta">
  <div class="slike-wrapper">
   <a class="w-inline-block featured-male-slike karta"     href="/zagreb/category/to-see/2/zagreb-is-the-capital-and-the-largest-city-of-croatia/5">
    <img class="featured-male-slike" src='/Content/610ddd4a-b9a7-45f8-ac56-66eec5968329.jpg' />
    <div class="potpis-mala-slika-featured">
      <div class="potpis-ispod-slike">Zagreb is the capital and the largest city of  Croatia</div>
     </div>
   </a>
   <a class="w-inline-block featured-male-slike karta" href="/zagreb/category/to-see/2/museum-of-broken-relationships/8">
    <img class="featured-male-slike" src='/Content/3a6ee262-676f-4599-9f97-6b9c48136449.jpg' />
    <div class="potpis-mala-slika-featured">
     <div class="potpis-ispod-slike">Museum of Broken Relationships</div>
    </div>
  </a>
 </div>
 <div class="strelica-lijevo"> <img src='/Content/strelica-lijevo.svg' /> </div>
 <div class="strelica-desno"> <img src='/Content/strelica-desno.svg' /> </div>
</div>

可以改为：

<div class="w-clearfix main-content karta">
 <div class="strelica-lijevo"> <img src='/Content/strelica-lijevo.svg' /> </div>
  <div class="slike-wrapper">
   <a class="w-inline-block featured-male-slike karta"     href="/zagreb/category/to-see/2/zagreb-is-the-capital-and-the-largest-city-of-croatia/5">
    <img class="featured-male-slike" src='/Content/610ddd4a-b9a7-45f8-ac56-66eec5968329.jpg' />
    <div class="potpis-mala-slika-featured">
      <div class="potpis-ispod-slike">Zagreb is the capital and the largest city of  Croatia</div>
     </div>
   </a>
   <a class="w-inline-block featured-male-slike karta" href="/zagreb/category/to-see/2/museum-of-broken-relationships/8">
    <img class="featured-male-slike" src='/Content/3a6ee262-676f-4599-9f97-6b9c48136449.jpg' />
    <div class="potpis-mala-slika-featured">
     <div class="potpis-ispod-slike">Museum of Broken Relationships</div>
    </div>
  </a>
 </div>
 <div class="strelica-desno"> <img src='/Content/strelica-desno.svg' /> </div>
</div>  

这只会改变元素的顺序 - 第一个是左箭头，而不是画廊，而不是右箭头 - 因此它们会彼此相邻显示。猜猜这可以用另一种方式改变，但这是最简单的方法，而不必在CSS中改变太多。

在CSS

中

.featured-male-slike.karta
{  
   clear: right;
   display: inline;
   float: left;
   margin-top: 30px;
   overflow: hidden;
   /* position: absolute; */  /* <--comment position abolute out */
}

评论＆＃34;职位：绝对;＆＃34; out - 你也可以删除它，但最好保留它，以便你可以检查任何为你创建这个滑块的人，也许还有一些其他方法来修复滑块你提到应该是按原样工作。由于此position:absolute图库仍会显示在左箭头上方，因此删除它的目的是保留所有三个元素的CSS属性float:left - 左箭头，图库，右箭头，以便它们将彼此相邻显示。
接下来取决于您 - 图像显示位置不正确，因为它们具有不同的高度，img的css为height: auto，这意味着每个img的高度取决于实际计算的高度（因为两个图像）从较大的原始图像缩小）。您可以尝试显示相同大小的图像，也可以添加css为两个图像设置固定高度，例如

.slike-wrapper img
{
   height:140px;
}

因为左图像的计算高度为158px，右图像的计算高度为140px。由于我只是在浏览器的网络开发者工具中直接测试过，我无法保证这种方法对您有用，但您可以尝试一下。