HTML/CSS 移动兼容性

Question

前几天开始利用业余时间学习HTML/CSS，编写自己的测试网站。当我尝试在智能手机上访问我的网站时，有时遇到了问题。这里Here you can see that the Picture is shifted above the border .

在桌面上一切正常，但如您所见，它已转移到移动设备上。我尝试了几种方法，但都没有解决问题。由于我刚开始，我没有其他想法。

我不想发布我所有的代码，所以问题是 here

提前谢谢你

Answer 1

恐怕您的问题不仅与移动有关。这就是当您 float 时发生的情况，容器元素失去其布局。要修复它，您只需将其归还，例如应用 overflow: hidden。

但我想您仍希望在个人数据的右侧保留 img，因为您必须将图像放在同一个容器中，应用 overflow: hidden。就像这样:

/*SCHRIFTART*/

@font-face {
	font-family: 'Levenim MT';
	font-style: normal;
	font-weight: normal;
	src: local('Levenim MT'), url('ufonts.com_levenim-mt.woff') format('woff');
}


/*ALLGEMEIN*/


* {
	margin: 0;
	padding: 0;


}

/* CONTENT */

#PB-Bild {
    float: right;
    margin-top: 6px;
    margin-right:7.5px;
}

#Information {
overflow:hidden;
    height: 30%;
    width: 98%;
    border: 7px outset grey;
    background-color:whitesmoke;
    font-family: 'Arial Rounded MT';
    padding-left: 5px;
    color:darkblue;
}

.was {
    font-size: 150%;
    font-weight:900;
}
p.was::first-letter {
    color:brown;
    font-size:160%;
}

.was {
    font-family:Arial;
    color: black;
}

.uText {
    font-family:Arial;
    background-color:ivory;
    font-size:120%;
}

<div id="Information">
<img id="PB-Bild" src="https://fakeimg.pl/300x350">
    <p class="was">Name:</p>
    Domenic Malz <br>
    <p class="was">Alter:</p>
    16 Jahre <br>
    <p class="was">Geboren am:</p>
    29.04.2002  <br>
    <p class="was">Wohnort:</p>
    Berlin <br>
    <p class="was">E-Mail</p>
    postfach@domenicmalz.de <br>
</div>