Question

我的第一张照片是扔掉一切。转到my website，看看我的意思。右侧的三个图像应位于页面中间，文本应位于图片下方。我做错了什么？

<div id="img"><img src="images/15442_193554864778_3851953_n.jpg" width="245" height="306" alt="Me"/></div>
<div id="Lefttext"><p>Hello there. My name is Michael Pelvay and I am a Web specialist. A Web Specialist is between a Web Master and a Web Developer. A Web specialtist possesses the skills and knowledge to develop and implement dynamic Web sites, develop content-rich intranets and secure Web communications and web sites. </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/design resume.pdf"><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>

html, body{
width:auto;
height:auto;
margin:0;
background-color:#121212;
}

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

#img{
float:left;
width:245px;
margin:60px 0 0 60px;
}

#Lefttext{
color: #B5D5FB;
position:relative;
float: left;
width: 424px;
top:380px;
left:80px;
}

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

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

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

#name {
color:#FFF;
float:left;
margin:50px 0px 0px 320px;
}

#nav {
font-size:20px;
float:right;
margin:64px 250px 0px 0px;
}

#nav li{
display:inline;
margin-right:75px;
}

#nav a:link{
color:#C1CECC;
text-decoration:none;
}

#nav a:visited{
color:#C1CECC;
text-decoration:none;
}

#links{
font-size:24px;
}

#links a:link{
color:#C1CECC;
text-decoration:none;
}

Answer 1

你可以给你的#Lefttext一个左：-245px，它会把你的文字放在图像下

Answer 2

我在Chrome开发工具中试过这个，看起来像你想要的那样：

#img{
float:left;
width:245px;
margin:60px 0 0 60px;
position: absolute;
}

将position: absolute;添加到#img div会将其从文档流中取出，以便其他所有内容都可以使用。

如果有人想解释为什么他们给出了一个有效的答案，并解释了它的工作原理，请随时在下面添加评论。：d

Answer 3

迈克 - 你的挑战是几件不同的事情：

如果向左浮动，则需要clear: left要在其下方显示的任何内容。
如果您有相对位置，则不指定top。 top（left，right，bottom）是定位absolute或fixed的合适属性。

以下是一些建议的修改：

#Lefttext {
    color: #B5D5FB;
    float: left;
    clear: left;
    position: relative;
    width: 424px;
    margin-left: 80px;
}

第一个div使所有其他div移动到位

3 个答案: