除具有float和center的div类之外，布局div

Question

美好的一天！到目前为止，我已经使用了浮点函数right和left，但由于某种原因我卡住了并且无法前进。我想要一个中心div，其中一个div左右浮动在中心div中。

这是我到目前为止所取得的成就：

<style type="text/css">
#wrap{
	width:485px;
}
.left {
	width:240px;
	background-color: #00d;
	height:123px;
	float: left;
}

.right {
	width:240px;
	background-color: #00d;
	height:123px;
	float: right;
}

</style>

<div id="wrap">
	<div class="left"></div>
	<div class="right"></div>
</div>

最后。这是我要实现的目标。

谢谢

Answer 1

就我个人而言，我不会使用浮点数。相反，我将在display: flex元素上使用wrap。示例：

#wrap {
  display: flex;
  width: 100%;
}

.wrap-item {
  background-color: #00d;
  height: 123px;	
  text-align: center;
  margin: 2px;
}

.left {
  width: 25%;
}

.center {
  width: 50%;
}

.right {
  width: 25%;
}

<div id="wrap">
  <div class="wrap-item left">LEFT</div>
  <div class="wrap-item center">CENTER</div>
  <div class="wrap-item right">RIGHT</div>
</div>

另外，请注意使用宽度百分比来获得某种响应（适应于不同的屏幕宽度）。

Answer 2

使用CSS Flexbox而不是float，可以使垂直对齐和其他对齐方式更加简单。然后使用CSS Transforms旋转文本。

#wrap{
  width:600px;
  height:150px;
  display:flex;  /* The container will be laid out as a flex box */
  align-items:stretch; /* Makes the childre use all the height of the parent */
}
#wrap > div {
  background-color: #00d;
  margin:3px;
  text-align:center;
  color:#fff;
  width:25%; 
  display:flex; /* The children can also be laid out as flex box containers  */
  align-items:center; /* Alignment along the "cross-axis" (vertical here) */
  justify-content:center; /* Alignment along "main-axis" (horizontal here) */
  font-size:2em;
}

/* Override the width for just the center item */
#wrap > div.center { width:50%; }

.rotate { transform:rotate(45deg);} /* Rotate the element */

<div id="wrap">
	<div><div class="rotate">LEFT</div></div>
	<div class="center">CENTER</div>
	<div><div class="rotate">RIGHT</div></div>  
</div>