我正在开发一个基本网站的一部分，它需要在左侧放置图像和文字，在右侧放置其他较小的框。左侧应该占据可用屏幕的 60％ 并且......
我正在开发一个基本网站的部分内容，该网站需要在左侧放置图像和文字，在右侧放置其他较小的框。
左侧应该占据可用屏幕的 60％，右侧占据剩余的 40％。
我决定使用 flexbox，因为我认为通过将盒子放在盒子内等等可以让我的生活变得轻松很多。
如下面提供的代码所示，我将左侧弹性框放在 a 上 width: 60%; ，将其中的图像放在 a 上， width: 100%; 这样它就占据了 60% 的可用空间的 100%。我的主要问题出现在我引入第二个弹性框时。我也给它一个， width: 40%; 但它开始与另一个弹性框重叠。
我也尝试明确地给父级指定 100% 的宽度，这样当我到达子级时它就可以正确地划分，但这没有任何作用......
该项目看起来应该是这样的：
预期结果
但我自己能做到的最多的事情是这样的：
目前的结果
我目前正在处理的 HTML 部分是：
<div class="mid_content">
<div class="box_1">
<img
src="./resources/capstone_colmar_assets/images/information-main.jpg"
alt="Man in a white sweater reading a book"
/>
<h2>It doesn't hurt to keep practicing.</h2>
<p>
"Curabitur vitae libero in ipsum portitor consequat. Aliquam et
commodo lectus, nec consequat neque. Sed non accumsan urna.
Phasellus sed consequat ex. Etiam eget magna laoreet, efficitur
dolor consequat, tristique ligula.
</p>
<br />
<br />
<footer>Emanuel, Sr Strategist at Hiring-com</footer>
</div>
<div class="box_2">
<div class="box_2_1">
<img
src="./resources/capstone_colmar_assets/images/information-orientation.jpg"
alt="Birdseye view of people walking "
/>
<div class="asidetext">
<h3>Orientation Date</h3>
<p>Tue 10/11 & Wed 10/12: 8am-3pm</p>
<a href="#">Read more</a>
</div>
</div>
<div class="box_2_2">
<img
src="./resources/capstone_colmar_assets/images/information-campus.jpg"
alt="Study room with a map of South America on the wall"
/>
<div class="asidetext">
<h3>Our Campus</h3>
<p>Find which campus is close by you</p>
<a href="#">Read more</a>
</div>
</div>
<div class="box_2_3">
<img
src="./resources/capstone_colmar_assets/images/information-guest-lecture.jpg"
alt="Bearded guy older goy wearing glases and a hat turning back"
/>
<div class="asidetext">
<h3>Our guest lecture</h3>
<p>
Join a keynote with Oliver Sack about music in medical treatment
</p>
<a href="#">Read more</a>
</div>
</div>
</div>
</div>
CSS 如下（我有一个重置的 CSS，但我不认为这是问题所在，我一直在处理代码的其他部分，而且它是基本的 meyerweb 重置，不会以任何其他方式指示其他阻碍：
.mid_content {
display: flex;
width: 100%;
margin-top: 2rem;
}
.box_1 {
display: flex;
width: 60%;
flex-flow: column wrap;
}
.box_1 img {
width: 100%;
height: auto;
padding: 0 1.5rem 2rem 1.5rem;
}
.box_2 {
display: flex;
width: 40%;
flex-flow: column;
}
.box_2 img {
width: 30%;
height: auto;
padding: 1rem;
}
.box_2_1 {
display: flex;
align-items: center;
}
.box_2_1 img {
padding-top: 0;
}
.box_2_2 {
display: flex;
align-items: center;
}
.box_2_3 {
display: flex;
align-items: center;
}
另外，我是新手，如果有更好的方法将我的代码粘贴到这里，请告诉我。
您的 UI 中存在许多小问题，但主要问题是左右内容无法正确对齐，导致此问题的原因是 padding: 0 1.5rem 2rem 1.5rem; 。要修复该问题，请 padding: 0 1.5rem 2rem 1.5rem; 从 box_1 img 移至 box_1 .
以下是工作示例，如果您遇到任何其他问题，请分享。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
margin: 0;
padding: 0;
background-color: white;
}
.mainDiv {
color: white;
width: 100%;
height: 100vh;
background-color: #1e1e1e;
display: flex;
align-items: center;
justify-content: center;
}
.mid_content {
display: flex;
width: 100%;
margin-top: 2rem;
}
.box_1 {
display: flex;
width: 60%;
flex-flow: column wrap;
padding: 0 1.5rem 2rem 1.5rem;
}
.box_1 img {
width: 100%;
height: auto;
}
.box_2 {
display: flex;
width: 40%;
flex-flow: column;
}
.box_2 img {
width: 30%;
height: auto;
padding: 1rem;
}
.box_2_1, .box_2_2,.box_2_3 {
display: flex;
align-items: center;
}
</style>
</head>
<body>
<div class="mid_content">
<div class="box_1">
<img
src="https://images.pexels.com/photos/7307621/pexels-photo-7307621.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
alt="Man in a white sweater reading a book"
/>
<h2>It doesn't hurt to keep practicing.</h2>
<p>
"Curabitur vitae libero in ipsum portitor consequat. Aliquam et
commodo lectus, nec consequat neque. Sed non accumsan urna.
Phasellus sed consequat ex. Etiam eget magna laoreet, efficitur
dolor consequat, tristique ligula.
</p>
<br />
<br />
<footer>Emanuel, Sr Strategist at Hiring-com</footer>
</div>
<div class="box_2">
<div class="box_2_1">
<img
src="https://images.pexels.com/photos/26950214/pexels-photo-26950214/free-photo-of-sunny-beach-from-above.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
alt="Birdseye view of people walking "
/>
<div class="asidetext">
<h3>Orientation Date</h3>
<p>Tue 10/11 & Wed 10/12: 8am-3pm</p>
<a href="#">Read more</a>
</div>
</div>
<div class="box_2_2">
<img
src="https://images.pexels.com/photos/26950214/pexels-photo-26950214/free-photo-of-sunny-beach-from-above.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
alt="Study room with a map of South America on the wall"
/>
<div class="asidetext">
<h3>Our Campus</h3>
<p>Find which campus is close by you</p>
<a href="#">Read more</a>
</div>
</div>
<div class="box_2_3">
<img
src="https://images.pexels.com/photos/26950214/pexels-photo-26950214/free-photo-of-sunny-beach-from-above.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
alt="Bearded guy older goy wearing glases and a hat turning back"
/>
<div class="asidetext">
<h3>Our guest lecture</h3>
<p>
Join a keynote with Oliver Sack about music in medical treatment
</p>
<a href="#">Read more</a>
</div>
</div>
</div>
</div>
</body>
</html>