因不明原因移動另一個div的高度？

Question

我似乎無法弄清楚這一點。我的網站開發組合設置爲http://www.codeisdna.com。該網站已完成70％。我有一個問題，但。如果您點擊其中一個項目，則會展開div以顯示完整內容（左側說明，右側預覽Macbook屏幕）。在其他一些標籤上，Macbook會轉移。當描述框與文本有一定的高度時會發生。任何人都可以幫助我找到解決方案嗎？我似乎已經嘗試了一切。我知道代碼有點草率，它很快就會被清理乾淨。 html代碼：

<div id="project_2" class="project_full psc"> 
    <div class="wrapper"> 
     <div class="proj_title"> 
      <h3> 
       Striking Code 
       <a class="proj_link" href="#">Visit Site</a> 
      </h3> 
     </div> 
     <div class="proj_details"> 
      <div class="requirements"> 
       <p>I felt that it was time to take my old portfolio (and internet identity) and reinvent it into something more clean -- something that more accurately represented my views on development today.</p> 
      </div> 
      <div class="overview"> 
       <p>I cleaned up the design (or, well, built a new one), created a new identity, and launched what's now known as code is dna.</p> 
      </div> 
      <div class="services"> 
       <ul> 
        <li>UI/UX Design</li> 
        <li>Web Development</li> 
       </ul> 
      </div> 
     </div> 
     <div class="proj_preview pull_left"> 
      <a class="proj_enlarge" id="single_1" href="img.jpg">Click to See More</a> 
     </div> 
    </div> 
</div> 

的CSS（.proj_preview是在Mac，.proj_details是描述）：

.project_full {display: none; margin-top: 20px; width: 100%; max-height: 450px; padding: 20px 0px; text-align: center; background: url(../img/code.jpg) top center no-repeat fixed #293134; box-shadow: inset 0 0 10px rgba(0,0,0,0.5); color: #fff; overflow: hidden;} 
.project_full .proj_title {width: 390px;} 
.project_full .proj_title h3 {font: 32px/40px 'Open Sans', Helvetica, Arial, Verdana, clean, sans-serif; font-weight: bold; margin-top: 20px; margin-bottom: 20px; display: inline-block; padding: 5px 10px; background: url(../img/project_expanded_content_bg.png) repeat;} 
.project_full .proj_title a.proj_link {display: inline-block; width: 27px; line-height: 40px; text-indent: -9999px; margin-left: 10px; background: url(../img/project_link.png) 2px 10px no-repeat;} 
.project_full .proj_details {width: 370px; padding: 10px; min-height: 250px; background: url(../img/project_expanded_content_bg.png) repeat; margin-bottom: 20px;} 
.project_full .proj_details .requirements {font: 16px/22px 'Open Sans', Helvetica, Arial, Verdana, clean, sans-serif; font-weight: bold; margin-top: 15px;} 
.project_full .proj_details .overview {margin-top: 20px; font: 14px/22px 'Open Sans', Helvetica, Arial, Verdana, clean, sans-serif;} 
.project_full .proj_details .services {margin-top: 25px; font: 12px/18px 'Open Sans', Helvetica, Arial, Verdana, clean, sans-serif;} 
.project_full .proj_details .services ul li {list-style-type: none; display: inline-block; letter-spacing: 0px; margin-right: 10px; background: #181818; padding: 3px 10px; border-radius: 100px; cursor: pointer;} 
.project_full .proj_details .services ul li:hover {background: #499dcf;} 
.project_full .proj_preview {width: 773px; height: 500px; position: relative; right: -420px; bottom: 370px;} 
.project_full .proj_preview a.proj_enlarge {display: block; width: 100%; height: 100%; text-indent: -9999px; background: url(../img/project_enlarge.png) 45% 40% no-repeat;} 
.project_full .proj_preview a.proj_enlarge:hover {background: url(../img/project_enlarge_hover.png) 45% 40% no-repeat;} 

Answer 1

更改CSS如下（刪除什麼註釋掉，並添加其餘部分） ：

.project_full .wrapper { 
    position: relative; 
} 
.project_full .prof_preview { 
    /* position: relative; */ 
    /* right: -420px; */ 
    /* bottom: 370px; */ 
    position: absolute; 
    left: 420px; 
    top: 0; /* adjust to your liking */ 
} 

有關CSS盒模型的重要參考，請參閱this classic BrainJar article。與定位摔跤和漂浮在CSS可以可怕的（我有生動，可怕的回憶），但一旦你得到它，它的蛋糕。