다양한 크기의 다양한 이미지가있어서 왼쪽 위 및 오른쪽 위 모서리에 단추를 겹쳐서 표시합니다.다른 크기의 이미지 모서리에 버튼을 동적으로 배치하는 방법은 무엇입니까? CSS
이미지가 왼쪽 맞춤이지만 오른쪽 단추가 일관성이 없기 때문에 왼쪽 단추가 좋습니다.
Chrome에서 버튼이 IE의 이미지 오른쪽 상단에 나타나고 버튼이 포함 된 div의 오른쪽 상단에 나타납니다 (올바르지 않음).
첨부 된 아이디어가 있습니까?
HTML :
<div class="center-block results">
<img src="../assets/dataworks/img/card-test.png" class="img-responsive draggable" />
<div class="resultOptions">
<i class="fa fa-bookmark-o fa-lg resultOption resultOptionBookmark pull-left" aria-hidden="true"></i>
<i class="fa fa-info-circle fa-lg resultOption resultOptionInfo pull-right" aria-hidden="true" data-toggle="modal" data-target="#resultsDetailModal"></i>
</div>
</div>
CSS :
.results {
display: inline-block;
}
.resultOptions {
position: relative;
display: block;
width: 80%;
}
.resultOptions i {
position: relative;
padding: 5px;
margin-top: -120px;
}
IE :
크롬 :
.resultOptions는 text-align-last : justify로 설정해야합니다. ... &. 결과 상대. –
음수 여백 대신 아이콘에 대해 상대 위치 컨테이너 안의 절대 위치 지정을 사용합니다. – hungerstar