Question

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

如果您访问我的网站并在底部滚动，您会看到我已经包含了一张世界地图图像，您可以看到背景图像被切掉并留下底部白色，触发问题的是世界地图的float:right;，如果我移除了float:right;，则可以正常使用

此外，地图和底部之间存在巨大差距，这是我不想要的，这是由应用于圆形轮廓图像的top:-100px;和应用于信息div的top:-230px;引起的/ p>

我如何解决这些问题？

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 -->

顶部定位问题：

1 个答案: