html - top :的定位问题

Question

我正在建立我的第一个网站/作品集 http://patrykponichtera.com/我遇到了一个我无法解决的问题

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

在 map 和底部之间还有一个巨大的差距，这是我不想要的，它是由应用于圆形轮廓图像的 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 -->