1. 홈
  2. 질의 응답
  3. 자동 높이로 두 div를 중첩 할 때 어떻게하면 작은 div를 상단에 붙이게 할 수 있습니까?

자동 높이로 두 div를 중첩 할 때 어떻게하면 작은 div를 상단에 붙이게 할 수 있습니까?

2011-01-27 4 views
0 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>Untitled Document</title> 

<style type="text/css"> 
* { 
    margin: 0px; 
    padding: 0px; 
} 

html, body { 
    height: 100%; 
} 
</style> 

</head> 

<body bgcolor="#00CC99"> 

<div style="position: relative; min-height: 600px; height: auto; width: 800px; border: 3px solid #000000; padding: 10px;"> 
    <div style="position: relative; display: inline-block; min-height: 500px; width: 300px; border: 3px solid #000000; overflow: auto; padding: 10px;"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac sem sit amet dolor fermentum semper sit amet vitae lectus. Aliquam tempor blandit pharetra. Vestibulum dapibus, tellus at sagittis tempus, neque dolor consequat velit, eget feugiat est lorem eu orci. Quisque consequat consequat mi, fermentum mollis arcu pellentesque ut. Nulla ut risus risus. Vestibulum eget velit eget risus elementum interdum nec sit amet nisi. Nunc ante nunc, volutpat ac dignissim auctor, mattis sit amet metus. Integer bibendum auctor ante, ac tempor leo faucibus in. Donec leo tellus, faucibus eget sagittis a, hendrerit ut tortor. Aenean vulputate placerat suscipit. Vivamus hendrerit sem a velit bibendum malesuada pharetra non nunc. Praesent eget erat enim, sit amet rutrum leo. Mauris nulla nunc, scelerisque ac dapibus eget, facilisis eget neque. Maecenas arcu sem, elementum in rutrum nec, molestie ut massa.</p><br> 

     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac sem sit amet dolor fermentum semper sit amet vitae lectus. Aliquam tempor blandit pharetra. Vestibulum dapibus, tellus at sagittis tempus, neque dolor consequat velit, eget feugiat est lorem eu orci. Quisque consequat consequat mi, fermentum mollis arcu pellentesque ut. Nulla ut risus risus. Vestibulum eget velit eget risus elementum interdum nec sit amet nisi. Nunc ante nunc, volutpat ac dignissim auctor, mattis sit amet metus. Integer bibendum auctor ante, ac tempor leo faucibus in. Donec leo tellus, faucibus eget sagittis a, hendrerit ut tortor. Aenean vulputate placerat suscipit. Vivamus hendrerit sem a velit bibendum malesuada pharetra non nunc. Praesent eget erat enim, sit amet rutrum leo. Mauris nulla nunc, scelerisque ac dapibus eget, facilisis eget neque. Maecenas arcu sem, elementum in rutrum nec, molestie ut massa.</p> 
    </div> 

    <div style="position: relative; display: inline-block; min-height: 500px; width: 400px; border: 3px solid #000000; overflow: auto; padding: 10px;"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac sem sit amet dolor fermentum semper sit amet vitae lectus. Aliquam tempor blandit pharetra. Vestibulum dapibus, tellus at sagittis tempus, neque dolor consequat velit, eget feugiat est lorem eu orci. Quisque consequat consequat mi, fermentum mollis arcu pellentesque ut. Nulla ut risus risus. Vestibulum eget velit eget risus elementum interdum nec sit amet nisi. Nunc ante nunc, volutpat ac dignissim auctor, mattis sit amet metus. Integer bibendum auctor ante, ac tempor leo faucibus in. Donec leo tellus, faucibus eget sagittis a, hendrerit ut tortor. Aenean vulputate placerat suscipit. Vivamus hendrerit sem a velit bibendum malesuada pharetra non nunc. Praesent eget erat enim, sit amet rutrum leo. Mauris nulla nunc, scelerisque ac dapibus eget, facilisis eget neque. Maecenas arcu sem, elementum in rutrum nec, molestie ut massa.</p><br><br> 

     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac sem sit amet dolor fermentum semper sit amet vitae lectus. Aliquam tempor blandit pharetra. Vestibulum dapibus, tellus at sagittis tempus, neque dolor consequat velit, eget feugiat est lorem eu orci. Quisque consequat consequat mi, fermentum mollis arcu pellentesque ut. Nulla ut risus risus. Vestibulum eget velit eget risus elementum interdum nec sit amet nisi. Nunc ante nunc, volutpat ac dignissim auctor, mattis sit amet metus. Integer bibendum auctor ante, ac tempor leo faucibus in. Donec leo tellus, faucibus eget sagittis a, hendrerit ut tortor. Aenean vulputate placerat suscipit. Vivamus hendrerit sem a velit bibendum malesuada pharetra non nunc. Praesent eget erat enim, sit amet rutrum leo. Mauris nulla nunc, scelerisque ac dapibus eget, facilisis eget neque. Maecenas arcu sem, elementum in rutrum nec, molestie ut massa.</p><br><br> 

     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac sem sit amet dolor fermentum semper sit amet vitae lectus. Aliquam tempor blandit pharetra. Vestibulum dapibus, tellus at sagittis tempus, neque dolor consequat velit, eget feugiat est lorem eu orci. Quisque consequat consequat mi, fermentum mollis arcu pellentesque ut. Nulla ut risus risus. Vestibulum eget velit eget risus elementum interdum nec sit amet nisi. Nunc ante nunc, volutpat ac dignissim auctor, mattis sit amet metus. Integer bibendum auctor ante, ac tempor leo faucibus in. Donec leo tellus, faucibus eget sagittis a, hendrerit ut tortor. Aenean vulputate placerat suscipit. Vivamus hendrerit sem a velit bibendum malesuada pharetra non nunc. Praesent eget erat enim, sit amet rutrum leo. Mauris nulla nunc, scelerisque ac dapibus eget, facilisis eget neque. Maecenas arcu sem, elementum in rutrum nec, molestie ut massa.</p> 
    </div>  
</div> 



</body> 
</html>

분명히 왼쪽의 중첩 된 div는 두 개 중 짧은 것입니다. 왼쪽 div가 오른쪽 div와 같이 상단에서 동일한 레벨에 머물 수 있도록하려면 어떻게해야합니까?자동 높이로 두 div를 중첩 할 때 어떻게하면 작은 div를 상단에 붙이게 할 수 있습니까?

출처

2011-01-27 cereallarceny

답변

1

크롬 및 Firefox에서 첫 번째 (왼쪽) div 스타일로 vertical-align:top을 설정합니다 (IE 또는 Safari를 사용하지 않았지만 Safari가 작동한다고 가정 함).

출처

2011-01-27 07:02:46 nss

0 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>Untitled Document</title> 

<style type="text/css"> 
* { 
    margin: 0px; 
    padding: 0px; 
} 

html, body { 
    height: 100%; 
} 
</style> 

</head> 

<body bgcolor="#00CC99"> 

<div style="min-height: 600px; height: auto; width: 800px; border: 3px solid rgb(0, 0, 0); padding: 10px; overflow: auto;"> 
    <div style="min-height: 500px; width: 300px; border: 3px solid rgb(0, 0, 0); overflow: auto; padding: 10px; float: left;"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac sem sit amet dolor fermentum semper sit amet vitae lectus. Aliquam tempor blandit pharetra. Vestibulum dapibus, tellus at sagittis tempus, neque dolor consequat velit, eget feugiat est lorem eu orci. Quisque consequat consequat mi, fermentum mollis arcu pellentesque ut. Nulla ut risus risus. Vestibulum eget velit eget risus elementum interdum nec sit amet nisi. Nunc ante nunc, volutpat ac dignissim auctor, mattis sit amet metus. Integer bibendum auctor ante, ac tempor leo faucibus in. Donec leo tellus, faucibus eget sagittis a, hendrerit ut tortor. Aenean vulputate placerat suscipit. Vivamus hendrerit sem a velit bibendum malesuada pharetra non nunc. Praesent eget erat enim, sit amet rutrum leo. Mauris nulla nunc, scelerisque ac dapibus eget, facilisis eget neque. Maecenas arcu sem, elementum in rutrum nec, molestie ut massa.</p><br> 

     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac sem sit amet dolor fermentum semper sit amet vitae lectus. Aliquam tempor blandit pharetra. Vestibulum dapibus, tellus at sagittis tempus, neque dolor consequat velit, eget feugiat est lorem eu orci. Quisque consequat consequat mi, fermentum mollis arcu pellentesque ut. Nulla ut risus risus. Vestibulum eget velit eget risus elementum interdum nec sit amet nisi. Nunc ante nunc, volutpat ac dignissim auctor, mattis sit amet metus. Integer bibendum auctor ante, ac tempor leo faucibus in. Donec leo tellus, faucibus eget sagittis a, hendrerit ut tortor. Aenean vulputate placerat suscipit. Vivamus hendrerit sem a velit bibendum malesuada pharetra non nunc. Praesent eget erat enim, sit amet rutrum leo. Mauris nulla nunc, scelerisque ac dapibus eget, facilisis eget neque. Maecenas arcu sem, elementum in rutrum nec, molestie ut massa.</p> 
    </div> 

    <div style="min-height: 500px; width: 400px; border: 3px solid rgb(0, 0, 0); overflow: auto; padding: 10px;"> 

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac sem sit amet dolor fermentum semper sit amet vitae lectus. Aliquam tempor blandit pharetra. Vestibulum dapibus, tellus at sagittis tempus, neque dolor consequat velit, eget feugiat est lorem eu orci. Quisque consequat consequat mi, fermentum mollis arcu pellentesque ut. Nulla ut risus risus. Vestibulum eget velit eget risus elementum interdum nec sit amet nisi. Nunc ante nunc, volutpat ac dignissim auctor, mattis sit amet metus. Integer bibendum auctor ante, ac tempor leo faucibus in. Donec leo tellus, faucibus eget sagittis a, hendrerit ut tortor. Aenean vulputate placerat suscipit. Vivamus hendrerit sem a velit bibendum malesuada pharetra non nunc. Praesent eget erat enim, sit amet rutrum leo. Mauris nulla nunc, scelerisque ac dapibus eget, facilisis eget neque. Maecenas arcu sem, elementum in rutrum nec, molestie ut massa.</p><br><br> 

     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac sem sit amet dolor fermentum semper sit amet vitae lectus. Aliquam tempor blandit pharetra. Vestibulum dapibus, tellus at sagittis tempus, neque dolor consequat velit, eget feugiat est lorem eu orci. Quisque consequat consequat mi, fermentum mollis arcu pellentesque ut. Nulla ut risus risus. Vestibulum eget velit eget risus elementum interdum nec sit amet nisi. Nunc ante nunc, volutpat ac dignissim auctor, mattis sit amet metus. Integer bibendum auctor ante, ac tempor leo faucibus in. Donec leo tellus, faucibus eget sagittis a, hendrerit ut tortor. Aenean vulputate placerat suscipit. Vivamus hendrerit sem a velit bibendum malesuada pharetra non nunc. Praesent eget erat enim, sit amet rutrum leo. Mauris nulla nunc, scelerisque ac dapibus eget, facilisis eget neque. Maecenas arcu sem, elementum in rutrum nec, molestie ut massa.</p><br><br> 

     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac sem sit amet dolor fermentum semper sit amet vitae lectus. Aliquam tempor blandit pharetra. Vestibulum dapibus, tellus at sagittis tempus, neque dolor consequat velit, eget feugiat est lorem eu orci. Quisque consequat consequat mi, fermentum mollis arcu pellentesque ut. Nulla ut risus risus. Vestibulum eget velit eget risus elementum interdum nec sit amet nisi. Nunc ante nunc, volutpat ac dignissim auctor, mattis sit amet metus. Integer bibendum auctor ante, ac tempor leo faucibus in. Donec leo tellus, faucibus eget sagittis a, hendrerit ut tortor. Aenean vulputate placerat suscipit. Vivamus hendrerit sem a velit bibendum malesuada pharetra non nunc. Praesent eget erat enim, sit amet rutrum leo. Mauris nulla nunc, scelerisque ac dapibus eget, facilisis eget neque. Maecenas arcu sem, elementum in rutrum nec, molestie ut massa.</p> 
    </div>  
</div> 



</body> 
</html>

이렇게하면 문제가 해결됩니다.

출처

2011-01-27 07:28:42 intellidiot

+0

왼쪽 플로트는 문제를 해결하지만 div를 분리하려는 패딩을 무효화합니다. 세로 정렬은 나를 위해 가장 잘 작동합니다. – cereallarceny

관련 문제

 관련 문제