一个div的高度因为未知原因导致另一个div移动？

Question

一个div的高度因为未知原因导致另一个div移动？

3

我似乎无法解决这个问题。我已经在 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;}

- user1998102

我喜欢你的作品集设计理念 :) - Praveen Puglia

@pjp 谢谢！不过编码真的很痛苦... - user1998102

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ryan Artecona · Accepted Answer

请按照以下方式更改您的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盒模型的相关知识，可以参考这篇经典的BrainJar文章。在CSS中处理定位和浮动可能会很糟糕（我有深刻而可怕的回忆），但是一旦你理解了它，就会变得非常简单。