div를 다른 div 위에두고 div를 하단에 유지하십시오.

그림의 맨 아래에 div 이야기가 있는데 (mainMedia) div에 대해서도 사진 상단에 놓기를 원합니다.div를 다른 div 위에두고 div를 하단에 유지하십시오.

내가하려고 할 때 mainMedia 다이빙 위치 때문에 이야기 div 가기 가기 : 절대하지만 그것에 대해 다이빙을 유지하기 위해 그것을 유지해야 ... 어떤 아이디어?

도와 주시겠습니까?

고맙습니다.

HTML

<html> 
<head> 
    <title> Beta</title> 
    <!-- css links --> 
    <link rel="stylesheet" type="text/css" href="main.css"> 
</head> 
<body> 
    <div class="gigantic"> 
     <div class="main"> 
      <div class="twitterProfilePicture"> 
       <img src="https://si0.twimg.com/profile_images/2015016150/petecashmoreavatar_normal.png"> 
      </div> 
      <div class="push"> 
       <div class="mainMedia"> 
        <img src="http://blog.sunsafaris.com/wp-content/uploads/2013/02/dune-king-lion.jpg"> 
        <div class="about"> 
         <p><span>Mashable</span></br>3 Hours ago</p> 
        </div> 
       </div> 
      </div> 
      <div class="Story"> 
       <div class="heading"> 

       </div> 
       <div class="text"> 

       </div> 
      </div> 
     </div> 
    </div> 
</body> 
</html>

CSS

body 
{ 
    margin: 0; 
    background-color: rgb(233,234,237); 
    font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; 
} 

p 
{ 
    margin: 0; 
} 

.gigantic 
{ 
    width: 800px; 
    height: 100%; 
    margin-right: auto; 
    margin-left: auto; 
    padding-top: 20px; 
    margin-top: 40px; 
    /*background-color: #fff;*/ 
} 

.main 
{ 
    width: 700px; 
    height: 400px; 
    /*background-color: #000;*/ 
    margin-right: auto; 
    margin-left: auto; 
    padding: 30px; 
} 

.twitterProfilePicture 
{ 
    width: 55px; 
    height: 55px; 
    border-radius: 3px; 
    /*background-color: #fff;*/ 
    position: relative; 
    float: left; 
} 

.twitterProfilePicture img 
{ 
    width: 55px; 
    height: 55px; 
    border-radius: 3px; 
    /*background-color: #fff;*/ 
    position: relative; 
    float: left; 
} 

.mainMedia 
{ 
    width: 630px; 
    height: auto; 
    /*background-color: #fff;*/ 
    float: right; 
    border-radius: 4px; 
    position: relative; 
    margin-bottom: 10px; 
} 

.mainMedia img 
{ 
    width: 630px; 
    height: auto; 
    position: relative; 
    border-top-left-radius: 3px;  
    border-top-right-radius: 3px; 
} 

.about 
{ 
    position: absolute; 
    /*background-color: #000;*/ 
    overflow: hidden; 
    height: 35px; 
    position: absolute; 
    top: 7px; 
    left: 7px; 
    font-size: 12px; 
    color: rgb(94,118,171); 
} 

.about span 
{ 
    color: #385874; 
    font-size: 16px; 
} 

.story 
{ 
    width: 630px; 
    height: 300px; 
    background-color: #fff; 
    position: absolute; 
    margin-left: 70px; 
    border-bottom-left-radius: 3px; 
    border-bottom-right-radius: 3px; 
    position: static; 
    bottom: 0; 
}

출처

2013-03-08 user1754324

여기에 내 걸릴 당신이 달성하려고하는지에있다 :

내가 당신을 위해 fiddle here을 넣어.

maindiv div 안에 스토리 div를 붙여 넣기 만하면됩니다. 또한 ". 스토리"가 있어야 할 때 ".story"를 참조하는 CSS가 있습니다.

HTML :

<div class="gigantic"> 
     <div class="main"> 
      <div class="twitterProfilePicture"> 
       <img src="https://si0.twimg.com/profile_images/2015016150/petecashmoreavatar_normal.png"> 
      </div> 

    <div class="push"> 
       <div class="mainMedia"> 
         <img src="http://blog.sunsafaris.com/wp-content/uploads/2013/02/dune-king-lion.jpg"/> 
        <div class="about"> 
          <p><span>Mashable</span></br>3 Hours ago</p> 
        </div> 

      <div class="Story"> 
         <div class="heading">Heading</div> 
         <div class="text">Text Story here</div> 
        </div> 

     </div> 
      </div> 

     </div> 
    </div>

CSS :

body 
{ 
    margin: 0; 
    background-color: rgb(233,234,237); 
    font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; 
} 

p 
{ 
    margin: 0; 
} 

.gigantic 
{ 
    width: 800px; 
    height: 100%; 
    margin-right: auto; 
    margin-left: auto; 
    padding-top: 20px; 
    margin-top: 40px; 
    /*background-color: #fff;*/ 
} 

.main 
{ 
    width: 700px; 
    height: 400px; 
    /*background-color: #000;*/ 
    margin-right: auto; 
    margin-left: auto; 
    padding: 30px; 
} 

.twitterProfilePicture 
{ 
    width: 55px; 
    height: 55px; 
    border-radius: 3px; 
    /*background-color: #fff;*/ 
    position: relative; 
    float: left; 
} 

.twitterProfilePicture img 
{ 
    width: 55px; 
    height: 55px; 
    border-radius: 3px; 
    /*background-color: #fff;*/ 
    position: relative; 
    float: left; 
} 

.mainMedia 
{ 
    width: 630px; 
    height: auto; 
    /*background-color: #fff;*/ 
    float: right; 
    border-radius: 4px; 
    position: relative; 
    margin-bottom: 10px; 
} 

.mainMedia img 
{ 
    width: 630px; 
    height: auto; 
    position: relative; 
    border-top-left-radius: 3px;  
    border-top-right-radius: 3px; 
} 

.about 
{ 
    position: absolute; 
    /*background-color: #000;*/ 
    overflow: hidden; 
    height: 35px; 
    position: absolute; 
    top: 7px; 
    left: 7px; 
    font-size: 12px; 
    color: rgb(94,118,171); 
} 

.about span 
{ 
    color: #385874; 
    font-size: 16px; 
} 

.Story 
{ 
    background-color: black; 
    opacity:0.5; 
    position: absolute; 
    border-bottom-left-radius: 3px; 
    border-bottom-right-radius: 3px; 
    position: absolute; 
    bottom: 3px; 
    color:white; 
    width:630px; /*I made this the same as your mainMedia*/ 
}

나는이 도움이되기를 바랍니다.

출처

2013-03-08 23:34:41 Tony

div를 다른 div 위에두고 div를 하단에 유지하십시오.

답변

관련 문제