html - 如何将图像放置在 flex 容器的右侧?
问题描述
所以这是我目前正在创建的响应式网站的代码,它在移动版本中运行良好,但如您所见,在
@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>
解决方案
我对您的代码进行了一些更改。
- 我在文本包装器 div 中包装了文本。
- 我申请
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>
推荐阅读
- javascript - 如何在 Nuxtjs 中创建用于检查角色的中间件
- java - 如何将excel文件的可见性设置为true
- angular - 使用 VS Code 启动 Angular 应用程序时 Chrome 挂起
- php - 使用php中的递归函数调用,回声不嵌套
- node.js - 从 Firebase Cloud 函数返回承诺
- bash - 如何让我的 bash 脚本等待 30 分钟才能运行?
- javascript - React Navigation - 无法读取未定义的属性“导航”
- spring - Spring RestTemplate 如何处理第三方服务发送的响应内容类型“text/csv; charset=utf-8-sig”?
- python - Chrome 77 的 Chromedriver 应该支持无头下载,但下载仍然不起作用
- excel - VBA 函数首先评估内部属性