Question

我的容器上有height:auto，但它在第三个div后停止并使其他div返回并移动到左边的第三个div旁边，当它们应该在它右下方时。为什么我的身高不会超过我的第三个div。如果您需要视觉辅助，请转到my site。固定问题不需要再回答这个问题了！

#container{
margin:100px 50px 100px 300px;
min-width:500px;
max-width:1300px;
height:auto;
background-color:#26353c;
clear:both;
}

#portfolio{
float:right;
margin:100px -70px 0 0;
}

#resume{
float:right;
margin:15px -70px 0 0;
}

#aboutme{
float:right;
margin:15px -70px 0 0;
}

<div id="Lefttext">
<p>I have been in the Macomb Community Colleges MACA program earning my Web Specialist Degree. </p>
</div>
<div id="portfolio"><a href="portfolio.html"><img src="images/Portfolio.png" width="876" height="148" alt="Portfolio" /></a></div>
<div id="resume"><a href="resume.html"><img src="images/Resume.png" width="750" height="148" alt="Resume"/></a></div>
<div id="aboutme"><a href="about-me.html"><img src="images/About Me.png" width="624" height="148" alt="About me"/></a></div>

Answer 1

您需要为容器定义宽度，并将float: right添加到#Lefttext

Answer 2

很难从你的问题中说出来，但我认为你想要实现的目标是将这些图像相互对齐？如果是这种情况，只需尝试在每个div之间添加换行符：

    <p>I have been in the Macomb Community Colleges MACA program earning my Web     Specialist Degree.</p>
    </div>
    <div id="portfolio"><a href="portfolio.html"><img src="http://michaelpelvay.com/images/Portfolio.png" width="876" height="148" alt="Portfolio" /></a>
    </div>
    <br />
    <div id="resume"><a href="resume.html"><img src="http://michaelpelvay.com/images/Resume.png" width="750" height="148" alt="Resume"/></a>
    </div>
    <br />
    <div id="aboutme"><a href="about-me.html"><img src="http://michaelpelvay.com/images/About Me.png" width="624" height="148" alt="About me"/>    </a>
    </div>

以下是fiddle示例。

Answer 3

离开你的容器的div是浮动的，你需要清除它。只需将其添加到您的CSS：

.clearfloat {
    clear: both; 
}

#container的最后一个孩子必须是<div class="clearfloat"></div>。请查看Chris Coyier（CSS大师）撰写的这篇文章。

高度固定高度的集装箱div：auto

3 个答案: