网页中的空白答案

【问题标题】：WHITESPACE in Webpage网页中的空白
【发布时间】：2019-07-06 17:29:58
【问题描述】：

我的网站有问题我在屏幕右侧的 img 和文本之间有空白背景，请查看我的屏幕截图以了解我的意思，我将提供代码以查看我是否真的犯了错误我编写这个网站的代码我使用引导程序在移动设备上做出响应，但是你在我的屏幕截图中看到的不是。我该如何解决这个问题有人可以解决吗？我尝试 whit bootstrap 使用 d-block，但它仍然显示空白。

HTML

.myimg {
  position: absolute;
  top: 60em;
  left: 60em;
  width: 100%;
  height: auto;
}

.myimg2 {
  border-radius: 100%;
  width: 35%;
}

.name {
  position: absolute;
  top: 37em;
  left: 23em;
  color: azure;
  text-shadow: 2px 2px 2px black;
}

.mytext {
  position: absolute;
  top: 48em;
  color: wheat;
  text-shadow: 2px 2px 2px black;
}

<div id="aboutMe">
  <img src="Images/background.jpg" width="1920" height="1080" alt="bg">
  <div class="aboutMeContent ">
    <div class="container">
      <div class="row">
        <div class="myimg">
          <img src="Images/me.jpg" alt="me" class="myimg2">
        </div>
        <h1 class="name">Stefan Momcilovic</h1>
        <h4 class="col-sm-6 text-center mytext"><i>Hello dear visitors I am Stefan Momcilovic, I'm a web development from high school, so far I have several projects that I've made some of you can see in my portfolio, programming has been interesting since my early years, but for the first time I entered in programming is on elementary school I made games that you can find on a google play store, and from high school I'm doing web development, I hope we will work together on your project in the future,Have nice day!</i></h4>
      </div>
    </div>
  </div>
</div>

【问题讨论】：

这是因为您在
和
还有为什么背景图片不是背景？
我知道这可能是“奇怪的”，但是当我的 bg 设置为 css 时它不起作用我知道为什么但我会修复它..

标签： javascript html css twitter-bootstrap

【解决方案1】：

解决方案是将 CSS left 属性设置为 0，以便 HTMLElement 的左侧与页面之间没有间隙。

.myimg {
  position: absolute;
  top: 60em;
  left: 0;
  width: 100%;
  height: auto;
}

.myimg2 {
  border-radius: 100%;
  width: 35%;
}

.name {
  position: absolute;
  top: 37em;
  left: 0;
 
  color: azure;
  text-shadow: 2px 2px 2px black;
}

.mytext {
  position: absolute;
  top: 48em;
  left: 0;
  color: wheat;
  text-shadow: 2px 2px 2px black;
}

<div id="aboutMe">
  <img src="Images/background.jpg" width="1920" height="1080" alt="bg">
  <div class="aboutMeContent ">
    <div class="container">
      <div class="row">
        <div class="myimg">
          <img src="Images/me.jpg" alt="me" class="myimg2">
        </div>
        <h1 class="name">Stefan Momcilovic</h1>
        <h4 class="col-sm-6 text-center mytext"><i>Hello dear visitors I am Stefan Momcilovic, I'm a web development from high school, so far I have several projects that I've made some of you can see in my portfolio, programming has been interesting since my early years, but for the first time I entered in programming is on elementary school I made games that you can find on a google play store, and from high school I'm doing web development, I hope we will work together on your project in the future,Have nice day!</i></h4>
      </div>
    </div>
  </div>
</div>

【讨论】：

【解决方案2】：

1-如果你想制作响应式页面并改进你的代码，绝对位置不适合响应式页面。

2- 使用绝对位置时，要考虑父节点的相对位置，还要考虑父节点的盒子模型；

对于您的问题，如果您删除 left 或分配 left:0 则溢出-x 消除。

例如：

.myimg {
  position: absolute;
  top: 0;
  text-align:center;
  width: 100%;
  height: auto;
}

【讨论】：