나는 다음과 같은 HTML 구조를 가지고 제품의 목록을 가지고 부모

Question

의 바닥에 일부 HTML 요소를 정렬합니다

<div class="parent"> 
    <img src="myimg.jpg" /> 
    <div class="title">My Title</div> 
    <div class="buttons"></div> 
</div> 

서로 옆에 이러한 부모의 많은이 있습니다. 처음에는 제목의 길이가 다르기 때문에 종종 다른 높이가 될 수 있다는 문제점이있었습니다. 나는 이것을 display: flex;을 사용하여 고쳤으므로 이제는 모두 같은 높이가되었습니다. 그러나 parent의 하단에 붙이려면 buttons div가 필요하지만 제목과 이미지는 그대로 있어야합니다. 따라서 단추 아래의 공백이 아닌 단추와 이전 자식 인 parent 사이에 공백을 넣는 것이 좋습니다.

나는 이것에 대한 해결책을 찾기 위해 노력했지만 모든 결과는이 CSS로 이어질 : 다음 버튼을 제목을 중복 수 있기 때문에

.parent { position: relative; } 
.buttons { position: absolute; bottom: 0; } 

이 솔루션은 나를 위해 작동하지 않습니다. 그래서 지금까지 생각할 수있는 가장 좋은 방법은 버튼과 동일 하단에 패딩을 사용하는 것입니다 '높이 :

.parent { display: flex; position: relative; padding-bottom: 100px; } 
.buttons { position: absolute; bottom: 0; height: 100px; } 

그러나 버튼 때문에 나는 그것이 최선의 해결책이 있는지 확실하지 않다'높이 변경하거나 수 심지어 역동적 일 수 있습니다. 더 나은 해결책이 있습니까?

는 편집 :

다음은 문제를 설명하는 조각이다. 첫 번째 부모는 2 개의 버튼을 가지고 있지만 두 번째 버튼은 하나 뿐인데 이것은 의도 한 것입니다. 일부 제품의 버튼 수가 다를 수 있습니다. 그 이유는 padding-bottom으로 솔루션을 사용할 수없는 이유 중 하나입니다.

#wrap { display: flex; } 
 
.parent { display: inline-block; position: relative; padding-bottom: 100px; width: 100px; border: 1px solid black; padding: 10px 20px 20px; margin: 0 5px 10px; } 
 
.buttons { position: absolute; bottom: 0; height: 100px; } 
 
.button-one { background: green; } 
 
.button-two { background: red; } 
 
.button-one, .button-two { margin: 15px 0 0; }

<div id="wrap"> 
 
    <div class="parent"> 
 
    <img src="myimg.jpg" /> 
 
    <div class="title">My Title</div> 
 
    <div class="buttons"> 
 
     <div class="button-one">Button one</div> 
 
     <div class="button-two">Button two</div> 
 
    </div> 
 
    </div> 
 
    <div class="parent"> 
 
    <img src="myimg.jpg" /> 
 
    <div class="title">My TitleMy TitleMy TitleMy TitleMy TitleMy TitleMy TitleMy TitleMy TitleMy TitleMy TitleMy TitleMy TitleMy TitleMy TitleMy TitleMy TitleMy TitleMy TitleMy Title</div> 
 
    <div class="buttons"> 
 
     <div class="button-one">Button one</div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

이 작업을 수행하는 가장 간단한 방법은 "제목"에 패딩 바닥을 추가 할 수 있습니다. 또는 더 나은 옵션 인 HTML 구조를 변경할 수 있다면.

HTML로이 레이아웃을 사용해보십시오.

Answer 2

clear: both; 및 float: left;을 추가하여 부모의 맨 아래로 보내보십시오. 이처럼

:

.buttons { position: absolute; bottom: 0; height: 100px; clear: both; float: left; width: 100px; } 

Answer 3

나는이 문제인지 확실하지 오전하지만 난 당신은 높이를 추가 할 필요가 있다고 생각의 폭