Btn 和 Text aligen +do it responive

如何解决Btn 和 Text aligen +do it responive

我有一个关于对齐按钮的问题，我想将左按钮向左对齐/见图片）并将右按钮向右对齐，但我不能这样做：/ 从左右开始的文本也应该在同一个起点另外，如果我使网站具有响应性，那么文本就会丢失并且下面的按钮也消失了，您能否改进我的 css？她的照片，一切都写在上面

代码 HTML：

<pre>
<!DOCTYPE html>
<html lang="en">
<head>
   <Meta charset="UTF-8">
   <Meta http-equiv="X-UA-Compatible" content="IE=edge">
   <Meta name="viewport" content="width=device-width,initial-scale=1.0">
   <title>Document</title>
   <link rel="stylesheet" href="style.css">
   <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat+Subrayada:wght@700&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@900&display=swap" rel="stylesheet">



</head>
<body>
   <section class="back">
      <div class="left-text"> <p style="font-size: 30px; padding-top: 40px;">20% OFF</p> 
         finer <br>smile
         <div class="btn-left">
            <input type="button" value="Aligen left" class="Anscheuen">
      
         </div>    
      </div>
         
      <div class="right-text"><h6>Lorem ipsum dolor </h6> <h1>Lorem ipsum dolor sit</h1>  <p>Lorem ipsum,dolor sit amet consecteturipsum,dolor sit amet consectetur ipsum,dolor sit a? </p> 
      <div class="btn-right">
         <input type="button" value="Aligen right" class="Anscheuen">
   
      </div>     
    </div>



      <img src="https://demo.phlox.pro/shop-digital/wp-content/uploads/sites/127/2019/09/2.png" alt="" class="head">
   </section>

   
</body>
</html></pre>

    *{
   padding: 0;
   margin: 0;
   Box-sizing: border-Box;
}
.back{
   width: 80%;
   height: 400px;
   margin: 15% auto;
   background-color:#F42D38 ;
   position: relative;
   border-radius: 21px;
   color: #fff;
   display: flex;

}
.back:hover{
Box-shadow:#F42D38 0 0  50px 0; /* للظل لحتى يطلع متناسب */ 
}

.btn-right{
   padding-right: 50px;
   display: flex;
   justify-content: flex-end; 

   /* bottom: 10%;
   right: 10%;
   position: absolute; */


}
.btn-left{
display: block; 
  display: flex;
   justify-content:flex-start; 

   /* bottom: 10%;
   right: 10%;
   position: absolute; */


}

.Anscheuen{
   padding: 10px 20px;
   background-color: transparent;
   border: solid #fff 2px;
   color: #fff;
   margin-top: 10px;
   margin-left:auto;
}
.Anscheuen:hover{

   padding: 10px 20px;
   background-color: #fff;
   border: solid #fff 2px;
   color: #F42D38;
   margin-top: 10px;
}

.head{
   width: 90%;
   top: 20%;
   left:45%;
   transform: translate(-50%,-50%);
   position: absolute;
}
.left-text{
   flex-basis: 30%;
   font-size: 60px;
   padding-left: 4%;
   padding-top: 4%;
   text-transform: uppercase;
   font-weight: 800;
   font-family: 'Poppins',sans-serif;
   line-height: 95%;
   justify-content: flex-end;

}
.right-text{
   flex-basis: 70%;
 padding-top: 6%;
padding-left: 30%;
padding-right: 50px;
}

.right-text h1{
   font-size: 40px;
   font-family: 'Montserrat',sans-serif;
   text-transform: uppercase;
   line-height: 50px;
}
.right-text p{
   font-size: 15px;
   font-family: 'Poppins',sans-serif;
   line-height: 25px;
}
.right-text h6{
   font-size: 15px;
   font-family: 'Poppins',sans-serif;
   line-height: 50px;
}
@media (max-width:700px){


   .head{
      width: 150%;
      top: 10%;
      left: 57%;
      transform: translate(-50%,-50%);
      position: absolute;
      overflow: hidden;
   }

   .back{

      display: flex;
      flex-direction: column;
      height: 600px;

   }


   .left-text{
      font-size: 60px;
      margin-top: 30%;
      text-align: center;
      font-family: 'Poppins',sans-serif;
   }

   .right-text{
    padding-top: 8%;
    padding: 5% 5%;   
}
   

   .right-text h1{
   font-size: 30px;
   font-family: 'Montserrat',sans-serif;
   text-transform: uppercase;
   line-height: 30px;
}
   .right-text p{
   font-size: 15px;
   font-family: 'Poppins',sans-serif;
   line-height: 14px;
}
   .right-text h6{
   font-size: 15px;
   font-family: 'Poppins',sans-serif;
   line-height: 50px;
}

}

图像 https://ibb.co/RHPMR3m

解决方法

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.back {
  width: 80%;
  height: 400px;
  margin: 15% auto;
  background-color: #F42D38;
  position: relative;
  border-radius: 21px;
  color: #fff;
  display: flex;

}

.back:hover {
  box-shadow: #F42D38 0 0 50px 0;
  /* للظل لحتى يطلع متناسب */
}

.btn-right {
  padding-right: 50px;
  display: flex;
  justify-content: flex-end;

  /* bottom: 10%;
   right: 10%;
   position: absolute; */


}

.btn-left {
  display: block;
  display: flex;
  justify-content: flex-start;

  /* bottom: 10%;
   right: 10%;
   position: absolute; */


}

.Anscheuen {
  padding: 10px 20px;
  background-color: transparent;
  border: solid #fff 2px;
  color: #fff;
  margin-top: 10px;
  margin-left: auto;
}

.Anscheuen:hover {

  padding: 10px 20px;
  background-color: #fff;
  border: solid #fff 2px;
  color: #F42D38;
  margin-top: 10px;
}

.head {
  width: 90%;
  top: 20%;
  left: 45%;
  transform: translate(-50%,-50%);
  position: absolute;
}

.left-text {
  flex-basis: 30%;
  font-size: 60px;
  padding-left: 4%;
  padding-top: 4%;
  text-transform: uppercase;
  font-weight: 800;
  font-family: 'Poppins',sans-serif;
  line-height: 95%;
  justify-content: flex-end;

}

.right-text {
  flex-basis: 70%;
  padding-top: 6%;
  padding-left: 30%;
  padding-right: 50px;
}

.right-text h1 {
  font-size: 40px;
  font-family: 'Montserrat',sans-serif;
  text-transform: uppercase;
  line-height: 50px;
}

.right-text p {
  font-size: 15px;
  font-family: 'Poppins',sans-serif;
  line-height: 25px;
}

.right-text h6 {
  font-size: 15px;
  font-family: 'Poppins',sans-serif;
  line-height: 50px;
}

@media (max-width:700px) {

.Anscheuen {
  padding: 10px 20px;
  background-color: transparent;
  border: solid #fff 2px;
  color: #fff;
  margin-top: 10px;
  margin: auto;
}
  .head {
    width: 150%;
    top: 10%;
    left: 57%;
    transform: translate(-50%,-50%);
    position: absolute;
    overflow: hidden;
  }

  .back {

    display: flex;
    flex-direction: column;
    height: 600px;

  }


  .left-text {
    font-size: 60px;
    margin-top: 30%;
    text-align: center;
    font-family: 'Poppins',sans-serif;
  }

  .right-text {
    padding-top: 8%;
    padding: 5% 5%;
  }


  .right-text h1 {
    font-size: 30px;
    font-family: 'Montserrat',sans-serif;
    text-transform: uppercase;
    line-height: 30px;
  }

  .right-text p {
    font-size: 15px;
    font-family: 'Poppins',sans-serif;
    line-height: 14px;
  }

  .right-text h6 {
    font-size: 15px;
    font-family: 'Poppins',sans-serif;
    line-height: 50px;
  }

}

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat+Subrayada:wght@700&display=swap" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@900&display=swap" rel="stylesheet">



  </head>

  <body>
    <section class="back">
      <div class="left-text">
        <p style="font-size: 30px; padding-top: 40px;">20% OFF</p>
        finer <br>smile
        <div class="btn-left">
          <input type="button" value="Aligen left" class="Anscheuen">

        </div>
      </div>

      <div class="right-text">
        <h6>Lorem ipsum dolor </h6>
        <h1>Lorem ipsum dolor sit</h1>
        <p>Lorem ipsum,dolor sit amet consecteturipsum,dolor sit amet consectetur ipsum,dolor sit a? </p>
        <div class="btn-right">
          <input type="button" value="Aligen right" class="Anscheuen">

        </div>
      </div>



      <img src="https://demo.phlox.pro/shop-digital/wp-content/uploads/sites/127/2019/09/2.png" alt="" class="head">
    </section>


  </body>

</html>

Btn 和 Text aligen +do it responive

如何解决Btn 和 Text aligen +do it responive

解决方法

相关推荐