时间戳

首页 > 解决方案 > 我怎样才能改变一个位置

元素？

html - 我怎样才能改变一个位置
元素？

问题描述

我刚开始从事网络开发，我的第一个项目是一个简历网站。我试图用 hr 元素将教育和体验部分分开。它工作正常，然后我使用 CSS 中的 float 属性将教育描述对齐到左侧，将相应的日期对齐到右侧。现在，在教育部分之后的那条线是在错误的区域。这是一些代码：

    <section>
        <h2>EDUCATION</h2>
        <p id='e1'><strong>M.A. in Teaching</strong>, University of North Carolina</p>
        <p id='e2'><strong>June 2021 - May 2022</strong></p>
        <p id='e1'><strong>B.A., Human Development & Family Studies major & Education minor</strong>, University of North Carolina</p>
    </section>
    <hr>
    <section>
        <h2>EXPERIENCE</h2>

id e1 只是向左浮动，而 id e2 向右浮动。如何让 hr 元素实际出现在两个部分之间，而不是教育部分的中间？

标签： htmlcss

解决方案

  • id应该是唯一的，因此#e1从第三个p元素更改为您的选择，但不同。
  • 用于清除clear:left左侧的浮动属性hr
  • 您还可以使用 cleafix hack 来<hr>添加clearfix类<hr>并添加此 CSS
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
  • 您还可以使用border-right我在代码中指定的添加垂直规则

* {
  box-sizing: border-box/*So that padding used below don't effect width*/
}

hr {
  clear: left
}

#e1 {
  float: left;
  width: 33%; /*Width so that content is divided in 3colums*/
  
  height: 100px;
  /*Height specified so that border become equal for all others and act as a vertical rule*/
  
  border-right: 2px solid red;
  padding: 5px;
}

#e2 {
  float: right;
  width: 33%;
  height: 100px;
  padding: 5px;
}

#e3 {
  float: left;
  width: 33%;
  height: 100px;
  border-right: 2px solid red;
  padding: 5px;
}
<section>
  <h2>EDUCATION</h2>
  <p id='e1'><strong>M.A. in Teaching</strong>, University of North Carolina</p>
  <p id='e2'><strong>June 2021 - May 2022</strong></p>
  <p id='e3'><strong>B.A., Human Development & Family Studies major & Education minor</strong>, University of North Carolina</p>
</section>

<hr>
<section class="hed2">
  <h2>EXPERIENCE</h2>

推荐阅读