问html部分与上面的部分重叠
EN

Stack Overflow用户

提问于 2022-08-06 16:30:27

回答 1查看 52关注 0票数 0

* {
  box-sizing: border-box;
}

:root {
  --mobile-width: 375px;
  --light-blue: hsl(224, 93%, 58%);
}

.mmargin {
  margin: 50px auto;
}

body {
  margin: 0;
  padding: 0 ;
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
}

h1,
h2,
h3 {
  font-family: "Raleway", sans-serif;
  font-weight: 700;
}

button:hover {
  opacity: 0.5;
  cursor: pointer;
}




/* sec-2  */

sec-2 {
  width: var(--mobile-width);
  display: flex;
  flex-direction: column;
  
}

sec-2 .image {
  margin-bottom: 50px;
}

sec-2 .image img {
  max-width: 100%;
}

sec-2 .text h2 {
  font-size: 20px;
  text-align: center;
  margin: 30px 0;
}

sec-2 .text p.p {
  margin: 50px auto;
  text-align: center;
}

sec-2 .text p.p {
  color: #3da08f;
  position: relative;
}

sec-2 .text p.p:hover {
  opacity: 0.5;
  cursor: pointer;
}

sec-2 .text p.p::before {
  content: "";
  width: 175px;
  height: 2px;
  background-color: #3da08f;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -5;
}

sec-2 .text p.p img {
  width: 25px;
  vertical-align: middle;
}

sec-2 .text .card {
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 10px rgb(197, 197, 197);
  padding: 20px;
}

sec-2 .text .card .image1 {
  width: 40px;
}

sec-2 .text .card .image1 img {
  width: 50%;
}

sec-2 .text .av {
  display: flex;
  align-items: center;
  gap: 15px;
  margin: 30px 0;
}

sec-2 .text .av .image2 {
  width: 50px;
}

sec-2 .text .av img {
  max-width: 100%;
  border-radius: 50%;
}

sec-2 .text .txt {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

sec-2 .text .txt h3 {
  margin: 0;
}

sec-2 .text .txt p {
  margin: 0;
}


/* sec-2  */

/* .sec3  */

.sec3 {
  width: var(--mobile-width);
  background-color: hsl(238, 22%, 44%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: white;
  padding: 50px;
}

.sec3 .text h2 {
  text-align: center;
}

.sec3 .text p {
  text-align: center;
  font-size: 18px;
  line-height: 1.5;
}

.sec3 form {
  margin: 30px auto;
}

.sec3 form input {
  width: 50%;
  margin-bottom: 10px;
  opacity: 0.3;
}

.sec3 form button {
  width: 50%;
  text-align: center;
}

/* .sec3  */

<sec-2 class="mmargin">
   <div class="image">
   </div>
   <div class="text">
   <h2>Stay productive, wherever you are</h2>
   <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus
      doloribus ipsa cum. Sapiente quisquam error magnam odit repellendus
      nihil dolorem quis
   </p>
   <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus
      doloribus ipsa cum. Sapiente quisquam error magnam odit repellendus
      nihil dolorem quis
   </p>
   <p class="p">
      See how Fylo works 
   </p>
   <div class="card">
   <div class="image1">
   </div>
   <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Qui omnis ducimus veniam, cupidita
   </p>
   <div class="av">
      <div class="image2">
      </div>
      <div class="txt">
         <h3>
            Kyle Burton
         </h3>
         <p>
            Founder &amp; CEO, Huddle
         </p>
      </div>
   </div>
</sec-2>
<!-- section 2  -->
<!-- section-3  -->
<div class="sec3 mmargin">
   <div class="text">
      <h2>
         Get early access today
      </h2>
      <p>
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid sapiente a alias libero labore rerum assumenda cupiditate illum iure adipisci. Veniam vel voluptatem deleniti officia culpa sed, asperiores eveniet fugiat.
      </p>
   </div>
   <form action="">
      <input type="email" placeholder="email@example.com">
      <button>
      Get Started For Free
      </button>
   </form>
</div>

我试着用多个部分来做一个布局，但是当我到了第三个部分的时候，它和上面的那个重叠了。类sec3的div与类txt重叠并在div中出现，当我更改该节的顺序时，它就正常了，但是如果我在第二个区段之后添加了一个区段，它就会重叠。

css

html

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-08-06 16:34:55

我尝试过这样做，我用它重命名了CSS，并修改了CSS以使sec-2成为一个类。

你现在有三个分开的部分。那是你在找的吗？

* {
  box-sizing: border-box;
}

:root {
  --mobile-width: 375px;
  --light-blue: hsl(224, 93%, 58%);
}

.mmargin {
  margin: 50px auto;
}

body {
  margin: 0;
  padding: 0 ;
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
}

h1,
h2,
h3 {
  font-family: "Raleway", sans-serif;
  font-weight: 700;
}

button:hover {
  opacity: 0.5;
  cursor: pointer;
}


/* sec-2  */

.sec-2 {
  width: var(--mobile-width);
  display: flex;
  flex-direction: column;
  
}

.sec-2 .image {
  margin-bottom: 50px;
}

.sec-2 .image img {
  max-width: 100%;
}

.sec-2 .text h2 {
  font-size: 20px;
  text-align: center;
  margin: 30px 0;
}

.sec-2 .text p.p {
  margin: 50px auto;
  text-align: center;
}

.sec-2 .text p.p {
  color: #3da08f;
  position: relative;
}

.sec-2 .text p.p:hover {
  opacity: 0.5;
  cursor: pointer;
}

.sec-2 .text p.p::before {
  content: "";
  width: 175px;
  height: 2px;
  background-color: #3da08f;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -5;
}

.sec-2 .text p.p img {
  width: 25px;
  vertical-align: middle;
}

.sec-2 .text .card {
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 10px rgb(197, 197, 197);
  padding: 20px;
}

.sec-2 .text .card .image1 {
  width: 40px;
}

.sec-2 .text .card .image1 img {
  width: 50%;
}

.sec-2 .text .av {
  display: flex;
  align-items: center;
  gap: 15px;
  margin: 30px 0;
}

.sec-2 .text .av .image2 {
  width: 50px;
}

.sec-2 .text .av img {
  max-width: 100%;
  border-radius: 50%;
}

.sec-2 .text .txt {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.sec-2 .text .txt h3 {
  margin: 0;
}

.sec-2 .text .txt p {
  margin: 0;
}


/* sec-2  */

/* .sec3  */

.sec3 {
  background-color: hsl(238, 22%, 44%);
  display: block;
  flex-direction: column;
  justify-content: center;
  color: white;
  padding: 50px;
}

.sec3 .text h2 {
  text-align: center;
}

.sec3 .text p {
  text-align: center;
  font-size: 18px;
  line-height: 1.5;
}

.sec3 form {
  margin: 30px auto;
}

.sec3 form input {
  width: 50%;
  margin-bottom: 10px;
  opacity: 0.3;
}

.sec3 form button {
  width: 50%;
  text-align: center;
}

/* .sec3  */

<div class="mmargin sec-2">
   <div class="image">
   </div>
   <div class="text">
   <h2>Stay productive, wherever you are</h2>
   <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus
      doloribus ipsa cum. Sapiente quisquam error magnam odit repellendus
      nihil dolorem quis
   </p>
   <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus
      doloribus ipsa cum. Sapiente quisquam error magnam odit repellendus
      nihil dolorem quis
   </p>
   <p class="p">
      See how Fylo works 
   </p>
   <div class="card">
   <div class="image1">
   </div>
   <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Qui omnis ducimus veniam, cupidita
   </p>
   <div class="av">
      <div class="image2">
      </div>
      <div class="txt">
         <h3>
            Kyle Burton
         </h3>
         <p>
            Founder &amp; CEO, Huddle
         </p>
      </div>
   </div>
</div>
<!-- section 2  -->
<!-- section-3  -->
<div class="sec3 mmargin">
   <div class="text">
      <h2>
         Get early access today
      </h2>
      <p>
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid sapiente a alias libero labore rerum assumenda cupiditate illum iure adipisci. Veniam vel voluptatem deleniti officia culpa sed, asperiores eveniet fugiat.
      </p>
   </div>
   <form action="">
      <input type="email" placeholder="email@example.com">
      <button>
      Get Started For Free
      </button>
   </form>
</div>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/73261501

复制

相似问题

问html部分与上面的部分重叠
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问html部分与上面的部分重叠EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问html部分与上面的部分重叠
EN