html - 顶部的定位问题：

Question

我正在建立我的第一个网站/投资组合http://patrykponichtera.com/我遇到了一个我无法解决的问题

如果您访问我的网站并在底部滚动，您会看到我已包含世界地图图像，您会看到背景图像被切断并留下底部白色，引发问题的是float:right;世界地图，如果我删除float:right;它工作正常

地图和底部之间也有很大的差距，这是我不想要的，这是由top:-100px;应用于圆形轮廓图像和top:-230px;应用于信息 div 引起的

我该如何解决这些问题？

Answer 1

如果你把你的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 -->