这是我目前正在创建的响应式网站的代码，它在移动版本中运行良好但是正如你所看到的，在
@media地产
我试图将我的图像移动到图像容器的右侧(红色边界容器)，但我无法做到这一点，请有人帮助我或告诉我在哪里我错了代码。
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Lexend+Deca&display=swap");
body {
background-color: hsl(233, 47%, 7%);
height: 100%;
}
.container {
display: flex;
justify-content: center;
align-items: center;
}
.card {
width: 300px;
height: 800px;
background-color: hsl(244, 38%, 16%);
border-radius: 10px;
margin: 70px 30px;
box-shadow: 0 0 10px black;
}
.image_container {
width: 300px;
height: auto;
}
.image {
width: 100%;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
mix-blend-mode: soft-light;
}
.text-container {
align-self: center;
text-align: center;
}
h1,
article {
font-family: "Inter", sans-serif;
padding: 0px 15px;
}
h1 {
padding-top: 10px;
color: white;
font-weight: 700;
}
.insights {
color: hsl(277, 64%, 61%);
}
article {
color: hsla(0, 0%, 100%, 0.75);
}
.stats_container {
align-content: center;
text-align: center;
display: block;
}
.num1 {
color: white;
font-family: "Lexend Deca", sans-serif;
font-weight: 400;
font-size: 35px;
display: block;
padding-top: 25px;
}
.stats_heading {
color: hsla(0, 0%, 100%, 0.6);
font-family: "Lexend Deca", sans-serif;
text-transform: uppercase;
}
@media only screen and (min-width: 1224px) {
.card {
width: 1040px;
height: 450px;
align-self: center;
}
.image_container {
border: 1px red solid;
width: 1040px;
height: 450px;
flex-direction: row;
justify-content: flex-end;
align-content: flex-end;
}
.image {
width: 50%;
height: 100%;
align-self: flex-end;
mix-blend-mode: soft-light;
}
}<DOCTYPE! html>
<html lang="en">
<head>
<link href="firstproject.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
</head>
<body>
<div class="container">
<div class="card">
<div class="image_container">
<img class="image" alt="main.jpg" src="image-header-desktop.jpg">
</div>
<div class="text-container">
<h1>Get <span class="insights">insights</span> that help your buisness grow</h1>
<article>Discover the benfits of data analyitcs and make better decision regarding revenue, customer experience, and overall efficiency.</article>
</div>
<div class="stats_container">
<section class="stats">
<div class="companies"><span class="num1">10k+</span>
<span class="stats_heading">companies</span></div>
<div class="templates"><span class="num1">314</span>
<span class="stats_heading">Templates</span></div>
<div class="queries"><span class="num1">12M+</span>
<span class="stats_heading">queries</span></div>
</section>
</div>
</div>
</div>
</body>
</html>我对你的代码做了一些修改。
- 我在text-wrapperdiv中设置了wrap text .
- 我将
display:flex;应用于。card.
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Lexend+Deca&display=swap");
body {
background-color: hsl(233, 47%, 7%);
height: 100%;
}
.container {
display: flex;
justify-content: center;
align-items: center;
}
.card {
width: 300px;
height: 800px;
background-color: hsl(244, 38%, 16%);
border-radius: 10px;
margin: 70px 30px;
box-shadow: 0 0 10px black;
}
.image_container {
width: 300px;
height: auto;
}
.image {
width: 100%;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
mix-blend-mode: soft-light;
}
.text-container {
align-self: center;
text-align: center;
}
h1,
article {
font-family: "Inter", sans-serif;
padding: 0px 15px;
}
h1 {
padding-top: 10px;
color: white;
font-weight: 700;
}
.insights {
color: hsl(277, 64%, 61%);
}
article {
color: hsla(0, 0%, 100%, 0.75);
}
.stats_container {
align-content: center;
text-align: center;
display: block;
}
.num1 {
color: white;
font-family: "Lexend Deca", sans-serif;
font-weight: 400;
font-size: 35px;
display: block;
padding-top: 25px;
}
.stats_heading {
color: hsla(0, 0%, 100%, 0.6);
font-family: "Lexend Deca", sans-serif;
text-transform: uppercase;
}
@media only screen and (min-width: 1224px) {
.card {
display:flex;
width: 1040px;
height: 450px;
align-self: center;
}
.image_container {
order:2;
border: 1px red solid;
width: 1040px;
height: 450px;
flex-direction: row;
justify-content: flex-end;
align-content: flex-end;
}
.image {
width: 100%;
height: 100%;
mix-blend-mode: soft-light;
}
}<div class="container">
<div class="card">
<div class="image_container">
<img class="image" alt="main.jpg" src="https://images.indianexpress.com/2020/08/Fujifilm-FB.jpg">
</div>
<div class="text-wrapper">
<div class="text-container">
<h1>Get <span class="insights">insights</span> that help your buisness grow</h1>
<article>Discover the benfits of data analyitcs and make better decision regarding revenue, customer experience, and overall efficiency.</article>
</div>
<div class="stats_container">
<section class="stats">
<div class="companies"><span class="num1">10k+</span>
<span class="stats_heading">companies</span></div>
<div class="templates"><span class="num1">314</span>
<span class="stats_heading">Templates</span></div>
<div class="queries"><span class="num1">12M+</span>
<span class="stats_heading">queries</span></div>
</section>
</div>
</div>
</div>
</div>