html - 盒子没有正确对齐

Question

我有 3 个不同大小的盒子。我想像这样对齐它们:

但我得到的只是这个:

我想创建一个 windows metro 主题网站，请帮忙。

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>