html - 锁定图像，使其不会相对于其他对象移动 html

Question

好吧，我正在我的 html 网站上工作，我在屏幕中间有一个图像。但是我想要在右侧紧挨着它的文字。但是每当我尝试添加文本时，图像就会向下移动。这非常烦人，我不知道该怎么办。

这是一张显示我想要的图片。 https://imgur.com/a/THV9q

如您所见。在左边的图像上，这就是我想要的。

slider 是图片的幻灯片。我要添加的文本应该在“我做什么” block 下。

目前的代码。

.slider {
  width: 1024px;
  margin: 2em auto;
  float:left;
  padding-left: 10%;
}

.slider-wrapper {
  width: 100%;
  height: 400px;
  position: relative;
}

.slide {
  float: left;
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 3s linear;
}

.slider-wrapper > .slide:first-child {
  opacity: 1;
}

<section id="main">
      <div class="container">
        <article id="main-col">
          <h1 class="page-title">About Me</h1>
          <p class="dark">
            My name is x and i am 19 years old. I was born in Gothenburg and live in a civilised neighborhood called Torslanda.
          </p>
          <p class="dark">
            My current focus with my studies but also with my knowledge is to get a sustificated job where i can make a whealty living of it. I have always strived to make the
            day to day life in the ordinary persons life easier! How do i do this? <br><br>
            To focus my attention to Artificiall Intelligence (Voice recognition etc..) and expanding my knowledge
            around automatic programming. If this subject caught your attention i would recommend to browse over to "OpenAI" youtube channel founded by Elon Musk and many others.
          </p>
        </article>
        <aside id="sidebar">
          <div class="dark">
            <h3>What I Do</h3>
            <p>As listed in the home page section. I work within <br></br> C# <br> </br> LUA <br></br> HTML & CSS <br></br> SQL</p>
          </div>
        </aside>
      </div>
    </section>

    <div class="slider" id="main-slider"><!-- outermost container element -->
    	<div class="slider-wrapper"><!-- innermost wrapper element -->
    		<img src="./img/hem.jpg" alt="First" class="slide" /><!-- slides -->
    		<img src="./img/torslanda.png" alt="Second" class="slide" />
    		<img src="./img/DSC_0032.JPG" alt="Third" class="slide" />
        <img src="./img/hem2.JPG" alt="Third" class="slide" />
    	</div>
    </div>

Answer 1

您在 </br> 中破坏了标记, br 标签不需要关闭。我建议对您的 HTML 进行一些修改。适本地关闭所有标记，并使两个部分成为主要部分和侧边栏。侧边栏位于 <aside>标记，而 main 保留在其 <section> 中容器。这将为您提供添加文本的空间。我们还需要重新设计 slider 上的 CSS。宽度、边距和填充。

/*use the body to layout the grid.*/
body {
  display: grid;
  /*fr is units for the remaning space available. So you appropriate as you wish. The children items will automatically take up the space in the tracks created*/
  grid-template-columns: 8fr 4fr;
  grid-gap: 20px;
}

.dark {
  background: #444;
  color: #999;
}

#sidebar ul {
  list-style: none;  
  margin: 0;
  padding: 0;
}

.slider {
  width: 100%;
  margin: 2em auto;
}

.slider-wrapper {
  width: 100%;
  min-height: 300px;
  position: relative;
}

.slide {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 3s linear;
}

.slider-wrapper > .slide:first-child {
  opacity: 1;
}

<section id="main">
  <div class="container">
    <article id="main-col">
      <h1 class="page-title">About Me</h1>
      <p class="dark">
        My name is x and i am 19 years old. I was born in Gothenburg and live in a civilised neighborhood called Torslanda.
      </p>
      <p class="dark">
        My current focus with my studies but also with my knowledge is to get a sustificated job where i can make a whealty living of it. I have always strived to make the
        day to day life in the ordinary persons life easier! How do i do this?</p>
      <p>To focus my attention to Artificiall Intelligence (Voice recognition etc..) and expanding my knowledge
        around automatic programming. If this subject caught your attention i would recommend to browse over to "OpenAI" youtube channel founded by Elon Musk and many others.
      </p>

      <div class="slider" id="main-slider"><!-- outermost container element -->
        <div class="slider-wrapper"><!-- innermost wrapper element -->
          <img src="https://images.unsplash.com/photo-1515902966800-95fac3b01698?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=c290798a28302ab8b78755d7b7ba5cf8" alt="First" class="slide" /><!-- slides -->
          <img src="https://images.unsplash.com/photo-1516450494832-d1ba9fc12c74?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=c42a522a890b5bd969ca225f7335f3eb" alt="Second" class="slide" />
          <img src="https://images.unsplash.com/photo-1506463765200-fc62eebf76e5?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=f44c618107bc1ea92a6116180d6ef698" alt="Third" class="slide" />
          <img src="https://images.unsplash.com/photo-1506623688006-bfa92504db12?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=90487cec51ba855349c6f1e104e6ed68" alt="Third" class="slide" />
        </div>
      </div>
    </article>

  </div>
</section>

<aside id="sidebar">
  <div class="dark">
    <h3>What I Do</h3>
    <!-- Please use ul or ol for lists.-->
    <p>As listed in the home page section. I work within: </p>
      <ul>
        <li>C#</li>
        <li>LUA</li>
        <li>HTML &amp; CSS</li>
        <li>SQL</li>
      </ul>
  </div>

  <div>
    <h3>More content here. </h3>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cupiditate itaque amet aut quam porro culpa architecto aperiam! Consectetur voluptas sapiente aut, enim asperiores velit, soluta quidem rem culpa error mollitia.</p>
  </div>
</aside>