框未正确对齐

Question

我有3盒不同的尺寸。我想像这样对齐它们：

但我得到的只是：

我想创建一个Windows地铁主题网站，所以请帮助。

header {
	background: url(./bg/bg1.png) 50% 50% no-repeat;
	width: 100%;
	height: 100%;
	position: absolute;
	background-size: cover;
}
.box {
	display: inline-block;
	margin: 5px;
	text-align: center;
}
.box img{
	max-width: 40%;
	margin-top: 5px;
	margin-left: 0px;
}
.menu {
	margin: 5px;
}
.boxes1 .box {
	display: inline-block;
}

 <header>
	<img src="./img/sweb-logo-new-wh1.png">
	<div class="menu">
		<div class="boxes1" style="width: 48%;">
		<a href="#">
			<div class="box" style="background: #3478e5; width: 50%; height: 300px; margin-bottom: -200px;">
				<img src="./img/user.png">
				<p style="margin-top: 100px; color: white;">Korsinička Zona</p>
			</div>
		</a>
		<a href="#">
			<div class="box" style="background: #34e560; width: 40%; height: 330px; margin-top: -500px;">
				<img src="./img/information.png">
				<p></p>
			</div>
		</a>
		<a href="#">
			<div class="box" style="background: #34e560; width: 30%; height: 200px; margin-top: -900px;">
				<img src="./img/information.png">
				<p></p>
			</div>
		</a>		
		</div>
	</div>
</header>

Answer 1

作为一般提示尝试从HTML中提取内联样式并转移到CSS以获得更好的时间。

尝试使用flexbox。如果任何人都可以改进，这可能甚至不是使用flexbox的最佳方式。

.container {
  display: flex;
}

.left {
  display: flex;
  flex-direction: column;
}

.box {
  display: block;
  width: 250px;
  outline: 1px solid black;
  background-color: green;
}

.box.teal {
  margin-right: 10px;
  margin-bottom: 10px;
  height: 300px;
  background-color: #36e5f0;
}

.box.pink {
  height: 100px;
  background-color: #fc33f3;
}

.box.green {
  height: 100%;
  background-color: #8bf221;
}

<div class="container">
  <div class="left">
    <div class="box teal"></div>
    <div class="box pink"></div>
  </div>
  <div class="right">
    <div class="box green"></div>
  </div>
</div>

Answer 2

试试这个：

＆＃13;

＆＃13;

.container {
  display: flex;
}

.left-items {
  display: flex;
  flex-direction: column;
}

.box {
  display: block;
  width: 250px;
  outline: 1px solid black;
  background-color: green;
}

.left-items .blue-box {
  margin-right: 10px;
  margin-bottom: 10px;
  height: 300px;
  background-color: #3478e5;
}

.left-items .pink-box {
  height: 100px;
  background-color: #fc33f3;
}

.right-item .green-box {
  height: 100%;
  background-color:  #34e560;
}

＆＃13;

<div class="container">
  <div class="left-items">
    <div class="box blue-box"></div>
    <div class="box pink-box"></div>
  </div>
  <div class="right-item">
    <div class="box green-box"></div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;