여러 열의 맨 아래에 요소 정렬

Question

길이가 서로 다른 3 개의 텍스트 열이 있는데 각 열의 맨 아래에 단추를 넣으려고합니다. 난 현재의 방법을 찾고 있어요 - 선호하는 CSS 만 - 열이 나란히 (떠 다니는)있을 때 페이지의 같은 세로 위치에 있도록 단추를 배치 한 다음 위치를 지정합니다. 레이아웃이 단일 열일 경우 관련 열 (작은 화면). 나는 열의 길이가 같을 필요가 없다. 왜냐하면 그 열의 길이가 솔루션의 일부가 아닌 이상 배경이 없기 때문이다.

이

은 관련 부분에 대한 코드/설명입니다

<div 1 - position:relative> 
    <div 2 - display:block;overflow:hidden> 
     <div 3 - position:relative; float:left> 
     <div 4 - display:block> 
      <img src="image1.jpg" /> 
      <h1>Title 1</h1> 
      <p> Column 1 text</p> 
     </div 4> 
     </div 3> 
     <div 3 - position:relative; float:left> 
     <div 4 - display:block> 
      <img src="image2.jpg" /> 
      <h1>Title 2</h1> 
      <p> Column 1 text</p> 
     </div 4> 
     </div 3> 
     <div 3 - position:relative; float:left> 
     <div 4 - display:block> 
      <img src="image3.jpg" /> 
      <h1>Title 3</h1> 
      <p> Column 1 text</p> 
     </div 4> 
     </div 3> 
    </div 2> 
</div 1> 

내가 코드 및 배치의 변화를 많이 시도했다, 그러나 나는 그것이 작동되도록 할 수 없었다. 나는 또한 몇 가지 해결책을 찾았지만, 그들은 (Internet Explorer 5로 돌아가는) 오래된 것이거나 그들이 관련성이 있는지는 알 수 없었을 것입니다. 아마 그들은 볼 수 있었지만 나는 그것을 볼 수 없었습니다!).

div가 표시된 후에 별도의 div에 배치하면 전체 화면에서 좋아 보이지만 작은 화면에서는 모든 버튼이 마지막 열 뒤에 배치됩니다. 기둥의 시작 또는 끝에 배치하면 각 기둥의 텍스트 길이에 따라 세로로 배치됩니다.

나는 위치를 시도 : 절대, 하단 : 0 div 2의 하단에 배치, 가난한 결과. 어떤 아이디어/솔루션이라도 대단히 감사합니다.

Answer 1

실제로 테이블은 더 넓은 화면에서만 작동합니다. 텍스트 섹션 사이의 단추가있는 텍스트를 단일 열로 흐르게하지 않을 것입니다. display : 및 screen width 미디어 쿼리를 사용하여 두 세트의 단추를 표시하거나 숨 깁니다. 한 세트는 각 열 뒤에 위치하고 한 세트는 div에 모든 열 뒤에 배치됩니다. 나는 또한 두 버전을 만들 수 있었고 화면 너비를 기반으로 표시/숨기기 위해 미디어 쿼리를 사용할 수 있었을 것 같습니다. jsfiddle.net/DTMgJ/5/의 jsfiddle는 미디어 쿼리와 큰 음수 여백을 사용하여 해결합니다.

Answer 2

제가 생각할 수있는 비 JS 솔루션은 테이블로 만드는 것입니다.

<table valign=top cellspacing=18px> 
<tr> 
    <td align=center><h2>Title 2</h2></td> 
    <td align=center><h2>Title 2</h2></td> 
    <td align=center><h2>Title 3</h2></td> 
</tr> 
<tr> 
    <td valign=top> 
     <img src="image1.jpg" /> 
     Column 1 text 
    </td> 
    <td valign=top> 
     <img src="image2.jpg" /> 
     You looked me dead in the eye and told me you were dying.<br /> 
     And then there was no light on the earth.<br /> 
     But what you saw in me that night was not a light.<br /> 
     Only Darkness. 
    </td> 
    <td valign=top> 
     <img src="image3.jpg" /> 
     Column 3 text 
    </td> 
</tr> 
<tr> 
    <td align=center><button>Hello</button></td> 
    <td align=center><button>There</button></td> 
    <td align=center><button>Sir </button></td> 
</tr> 


</table> 

이 코드는 원하는 결과를 제공하며 각 셀에 대해 CSS를 사용할 수 있습니다.

그렇지 않은 경우 각 div 요소를 jQuery 또는 순수 JavaScript로 반복하고 가장 큰 높이를 찾고 변수에 저장 한 다음 div 요소를 반복하여 버튼을 포함하고 각 변수를 변수에 따라 설정합니다. 그러면 position:absolute;bottom:0px;이 작동합니다.