html - 奇怪的div定位

Question

我收到了 HTML 和 CSS 布局，应该可以正常工作。但是，我遇到了一些奇怪的问题，我不确定为什么会发生这些问题。

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

如您所见箭头(CSS 类:.strelica-lijevo 和 .strelica-desno 目前位于图像包装器后面(CSS 类:.slike -wrapper) 什么时候应该放在左边 (.strelica-lijevo) 或右边 (.strelica-desno)。

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

Answer 1

HTML 和 CSS 存在一些问题 - 您应该尝试联系提供此 slider 的人以获得实现它的支持，或者您可以按照以下方式自行尝试(只需检查标记和 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 */
}

评论“position:absolute；” out - 你也可以删除它，但最好保留它，这样你就可以与为你创建此 slider 的人核实，也许还有其他方法可以修复 slider ，因为你提到它应该按原样工作。由于这个 position:absolute 画廊仍然会显示在左箭头上方，删除它的目的是为所有三个元素保留 CSS 属性 float:left -左箭头、画廊、右箭头，因此它们将彼此相邻显示。
接下来由您决定 - 图片显示位置不正确，因为它们具有不同的高度，并且 img 的 css 是 height: auto，这意味着每个 img 的高度取决于实际计算的高度(因为两个图像都是从较大的原始图像按比例缩小的)。您可以尝试显示相同大小的图像，或者您可以添加 css 为两个图像设置固定高度，例如

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

因为左图的计算高度为 158px，右图为 140px。由于我只是在浏览器的 Web 开发人员工具中直接对此进行了测试，因此我不能保证这种方法对您有用，但您可以尝试一下。