반응 형 슬라이더 내의 절대 위치 콘텐츠

Question

저는 지금 당장이 작업을 해본 결과 아무런 운이 없었습니다. 응답 성있는 콘텐츠 슬라이더가 있습니다. 하지만 난 슬라이더 내에서 콘텐츠를 절대적으로 배치하려고합니다. 래퍼가 위치 관계를 이미 설정 한 것처럼 상당히 직선적이라고 생각했습니다.

그러나 JS 슬라이더가 래퍼 내의 요소 높이를 계산하는 것으로 보입니다. 그러나 이미지가 중복되므로 절대 위치가 필요합니다. 나는 왼쪽 폭의 이미지에서 동작하고 떠 다니는 슬라이더에 최대 너비를 부여한 다음 다른 절대 위치 지정을 시도했습니다. 그러나 이것은 FF에서 작동하지 않는 것 같습니다. 지금까지 크롬에서 작동하도록 관리 해왔다.

.slider.imageLeft { 
    position: absolute; 
    width: 50%; 
    left: 0; 
    top:0; 
} 


.slider.imageRight { 
    position: absolute; 
    width: 50%; 
    right:0; 
    top:0; 
} 

<ul id="{{ slider_instance.name }}" class="slider"> 
    {% for slide in slider_slides %} 
    <li> 
    <div class="imageLeft"> 
     <img src="{{MEDIA_URL}}images/exterior2.jpg"> 
    </div> 

    <div class="imageRight"> 
     <img src="{{MEDIA_URL}}images/exterior2.jpg"> 
    </div> 

    </li> 
    {% endfor %} 
</ul> 

:

이 슬라이더 내에서 내 요소에 대한 CSS입니다 : http://bxslider.com/ 다음

내 HTML/CSS의 기본 개요이다 - 여기

내가 사용하고 슬라이더입니다 <li>에는 JS에서 위치 상대를 설정했습니다. 더 자세한 정보가 필요하시면 알려주세요.

감사합니다.

Answer 1

이제는 수레와 음수 여백을 사용하여 문제를 정렬 할 수있었습니다. 반응 형 슬라이더에 대해 훨씬 잘 작동합니다. 예 :

.slider .imageLeft { 
    float: left; 
    margin-right: -3.05085%; 
    width: 57.2881%; 
} 

.slider .imageRight { 
    float: right; 
    margin-top: 70px; 
    width: 45.7627%; 
} 

위의 예는 actualy 슬라이더를 보지 않고 누구에게나 의미의 큰 거래를하지 않습니다. 그러나 반응 형 슬라이더 내에서 절대적인 위치보다는 음수 여백을 사용하는 것이 좋습니다.

사람이 앞으로 나아갈 수 있기를 바랍니다.