#css #alignment
Вопрос:
У меня есть вопрос о выравнивании кнопки, я хочу выровнять левую кнопку слева / см. Рисунок) и выровнять правую кнопку справа, но я не могу этого сделать: / текст, начинающийся справа и слева, также должен быть в одной и той же начальной точке, если я сделаю веб-сайт отзывчивым, тогда текст будет потерян, а кнопка ниже исчезнет, вы можете улучшить мой 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@700amp;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@900amp;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 amet consecteturipsum, dolor sit amet consectetur ipsum, dolor sit amet consecteturipsum, dolor sit amet consectetur ipsum, dolor sit amet consecteturipsum, 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
Ответ №1:
* {
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@700amp;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@900amp;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 amet consecteturipsum, dolor sit amet consectetur ipsum, dolor sit amet consecteturipsum, dolor sit amet consectetur ipsum, dolor sit amet consecteturipsum, 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>