2017-10-06 5 views
2

다양한 크기의 다양한 이미지가있어서 왼쪽 위 및 오른쪽 위 모서리에 단추를 겹쳐서 표시합니다.다른 크기의 이미지 모서리에 버튼을 동적으로 배치하는 방법은 무엇입니까? 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 :

크롬 :

enter image description here

+0

.resultOptions는 text-align-last : justify로 설정해야합니다. ... &. 결과 상대. –

+0

음수 여백 대신 아이콘에 대해 상대 위치 컨테이너 안의 절대 위치 지정을 사용합니다. – hungerstar

답변

2

절대적으로 이미지와 아이콘이 당신이 원하는 방법을 정렬을 통해 놓습니다 아이콘 컨테이너을.

.results { 
 
    display: inline-block; 
 
    position: relative; 
 
} 
 

 
.resultOptions { 
 
    position: absolute; 
 
    width: 100%; 
 
    top: 0; 
 
    left: 0; 
 
    display: flex; 
 
    justify-content: space-between; 
 
} 
 

 
i { 
 
    margin: .5em; 
 
    color:white; 
 
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<div class="center-block results"> 
 
    <img src="http://www.placebacon.net/400/200?image=0" 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> 
 

 
<div class="center-block results"> 
 
    <img src="http://www.placebacon.net/250/210?image=2" 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>
하는 A 상대적인 위치 부모 내부

-1

나는 당신이 잘못된 길을 가고 있다고 생각합니다. position css 속성을 사용하여이 문제를 해결해야합니다. 이전 주석으로

for your right top icon 
.resultOptions-left { 
    position: absolute; 
    top:0px; 
    right:0px; 
} 
for your left top icon 
.resultOptions-right { 
    position: absolute; 
    top:0px; 
    left:0px; 
} 

https://www.w3schools.com/css/css_positioning.asp 그것의 오른쪽 상단에서 해당 사업부를 배치해야합니다 참조 첫째 상대 부모에게

+0

답변에 어떤 문제가 있습니까? –

0

있어 : 듀오 : relative/absolutetext-align-last가 함께 사용할 수 있습니다.

.results { 
 
    display: inline-block; 
 
    position: relative; 
 
} 
 

 
.resultOptions { 
 
    position: absolute; 
 
    top: 0.5em; 
 
    left: 0.5em; 
 
    right: 0.5em; 
 
    text-align-last: justify; 
 
    color:blue; 
 
    ; 
 
}
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'> 
 
<div class="center-block results"> 
 
    <img src="http://lorempixel.com/150/150" 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> 
 
<div class="center-block results"> 
 
    <img src="http://lorempixel.com/120/150" 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>

1

사용 절대 위치. 부정적인 여백 등으로 물건을 밀어 붙이려고하면 오류가 발생하기 쉽습니다.

body { 
 
    margin: 0; 
 
    display: flex; 
 
} 
 

 
.group { 
 
    margin: 10px 5px; 
 
    position: relative; 
 
} 
 
.options .option { 
 
    position: absolute; 
 
    width: 20px; 
 
    height: 20px; 
 
} 
 
.options .bookmark { 
 
    top: 5px; 
 
    left: 5px; 
 
    background-color: rebeccapurple; 
 
} 
 
.options .info { 
 
    top: 5px; 
 
    right: 5px; 
 
    background-color: indianred; 
 
}
<div class="group"> 
 
    <img src="https://placehold.it/200x300/fc0"> 
 
    <div class="options"> 
 
    <span class="option bookmark"></span> 
 
    <span class="option info"></span> 
 
    </div> 
 
</div> 
 

 
<div class="group"> 
 
    <img src="https://placehold.it/300x300/fc0"> 
 
    <div class="options"> 
 
    <span class="option bookmark"></span> 
 
    <span class="option info"></span> 
 
    </div> 
 
</div>

-1

I는 버튼 절대 위치를 사용한다. 이미지는 상대적으로 배치 된 배치 div의 너비를 채우고 버튼을 절대적으로 왼쪽으로 배치합니다 (0 (또는 무엇이든) 및 오른쪽 : 0). 지금 당장 당신은 그것들을 pull-left와 pull-right로 띄울 수 있습니다. 절대가 제대로 작동하도록 래퍼를 상대적으로 배치해야합니다. my codepen.

<div class="center-block results"> 
    <img src="http://via.placeholder.com/350x150" class="img-responsive draggable" /> 
    <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> 

.results { 
    display: inline-block; 
    position:relative; 
} 

.resultOptionBookmark, .resultOptionInfo { 
    position: absolute; 
    padding: 5px; 
    top:0; 
} 

.resultOptionBookmark{ 
    left:0; 
} 

.resultOptionInfo{ 
    right:0; 
} 
+0

-1은이 답변이 잘못되었거나 질문에 대답하지 않는다는 가정하에 무엇이 잘못 되었습니까? – mattstache

관련 문제