앵커 캐 러셀 탐색 CSS 만 사용하여 이미지 아래쪽으로 CSS 격자 (CSS 그리드 제외)

Question

예제 이미지에는 탐색 기능이 있습니다. 아래의 예제 코드는 잠재적 인 마크 업을 보여줍니다. 이미지 및 아래의 텍스트가 함께 이동해야하는 경우 (측면으로 슬라이드), 어떻게 CSS 만 사용하여 탐색 위치를 고정 할 수 있습니까? 나는 엘리먼트의 높이를 모른 채 자바 스크립트에 의존해야한다고 생각하지만, 그렇게하지 않아도된다.

분명히 말하자면, 여기서 내비게이션 은 중심에 놓 이도록으로 표시되지만 그렇지는 않습니다. 그들은 임의의 이미지 높이의 바닥에 떠 있어야합니다.

UPDATE

예 코드 (see CodePen) :

<div class="carousel"> 
    <div class="indices"> 
     <a href="#"><div class="dot"><div class="ghost">Carousel slide 1</div></div></a> 
     <a href="#"><div class="dot"><div class="ghost">Carousel slide 2</div></div></a> 
     <a href="#"><div class="dot"><div class="ghost">Carousel slide 3</div></div></a> 
    </div> 
    <div class="gutter"> 
     <div class="content"> 
      <div class="img"><img src="https://cdn.pixabay.com/photo/2016/05/25/13/55/horses-1414889_1280.jpg" alt="Horses"></div> 
      <div class="text">This text content can really be any arbitrary height, so it wouldn’t work to just use negative margins on the navigation, unfortunately.</div> 
     </div> 
     <div class="content"> 
      <div class="img"><img src="https://upload.wikimedia.org/wikipedia/commons/d/de/Nokota_Horses_cropped.jpg" alt="Other Horses"></div> 
      <div class="text">Also, images can be arbitrary heights.</div> 
     </div> 
     <div class="content"> 
      <div class="img"><img src="http://maxpixel.freegreatpicture.com/static/photo/640/Water-Turtle-Nature-Reptile-649667.jpg" alt="Turtles"></div> 
      <div class="text">Turtles</div> 
     </div> 
    </div> 
    <div class="nav"> 
     <a class="item prev" href="#" aria-label="Previous carousel story"></a> 
     <a class="item next" href="#" aria-label="Next carousel story"></a> 
    </div> 
</div> 

내 코드는 매우 유연; 필요한 경우 주변을 이동할 수 있습니다.

Answer 1

position : relative 및 position : absolute (이 simple example과 같은)를 사용하려 했습니까? 이미지 슬라이드와 글 머리 기호 탐색을 위치에 상대적으로 설정 한 div에서 래핑합니다. 그런 다음 탐색 래퍼를 절대 위치로 설정합니다 (하단 : 부모 div의 하단에 배치하려면 0). 상위 div의 높이가 img 높이에 따라 달라 지므로 이미지가 변경 되더라도 대개 정상적으로 유지됩니다.

.outer-div { 
    position: relative; 
} 

.bullet-nav { 
    position: absolute; 
    bottom: 0; 
    left: 50%; 
    transform: translateX(-50%); /* to center nav */ 
}