我正在建立我的第一个网站/作品集http://patrykponichtera.com/,但遇到无法解决的问题
如果您访问我的网站,然后在底部滚动,您会看到我包含一张世界地图图像,并且您可以看到背景图像被切除并且底部变成白色,引发问题的是float:right;
世界地图,如果我删除float:right;
则效果很好
在地图和底部之间也有很大的差距,这是我不希望的,这是由应用于圆轮廓图像的top:-100px;
和应用于信息div的top:-230px;
引起的
我该如何解决这些问题?
最佳答案
如果您将CSS更改为该怎么办?
#world-map {
position: absolute;
margin-right: 30px;
width: 50%;
height: auto;
right: 0;
bottom:-5px;
}
#content {
height: auto;
width: 100%;
background-color: #2f2f2f;
background-image: url('images/asfalt.png');
background-repeat: repeat;
position: relative;
}
<div id="world-map"><img alt="Worldmap" src="images/dotted-worldmap.svg"></div>
工作的HTML代码...
<div id="content">
<div id="profile">
<img id="profile-image" src="images/profile_pic.png">
</div>
<div id="info">
<div id="title-wrapper">
<h1 id="patryk-title" class="main-title">Patryk </h1> <h1 id="ponichtera-title" class="main-title">Ponichtera</h1>
</div>
<div id="profession">
<div id="skew-line-1" class="skew-line"></div>
<div id="skew-line-2" class="skew-line"></div>
<div id="skew-line-3" class="skew-line"></div>
<div id="profession-content1" class="skew-line">
<h3 class="skew-text">Graphic Designer</h3>
</div>
<div id="profession-content2" class="skew-line">
<h3 class="skew-text">Android Developer</h3>
</div>
</div>
<div id="xp-years">
<div id="skew-line-3" class="skew-line"></div>
<div id="skew-line-4" class="skew-line"></div>
<div id="skew-line-5" class="skew-line"></div>
<div id="xp-years-content" class="skew-line">
<h3 class="skew-text">5 years xp in graphics</h3>
</div>
</div>
<div id="biography">
<p class="bio">My name is Patryk Ponichtera, I was born in Łomża, Poland in June 1990.</p><p>
</p><p class="bio">I'm a self taught graphic designer and Android developer.</p><p>
</p><p class="bio">I've been working in graphics for 5 years, in both 3D and 2D.</p><p>
</p><p class="bio">Games and movies were my main inspiration and motivation to learn graphic design.</p><p>
</p><p class="bio">At the end of 2010 i've purchased my first android device, which led me to android app development, I've started by helping a friend write an app for his High School graduation exam.</p><p>
</p><p class="bio">In August 2012 I've released my first app Double Counter to the Play Store, and in September 2012 I've released my second app Wakey.</p><p>
</p></div>
</div> <!-- #info -->
<div id="world-map"><img alt="Worldmap" src="images/dotted-worldmap.svg"></div>
</div><!-- #content -->
关于html - 顶部的定位问题:,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/17180100/