Question

我有2个div块，里面有图像，我让它们正确对齐，但我让它们对齐到左边。我尝试将它们对准中心，但随后它们最终在彼此之上。我应该围绕它们创建一个块并将其置于中心位置吗？

page

＆＃13;

body {
  background-color: #C8C8C8;
  background-image: images/rottenlargebg.png;
}
h1 {
  text-shadow: 2px 3px gray;
  margin-left: auto;
  margin-right: auto;
  width: 200px;
}
img.width {
  width: 100%;
}
img.tLeft {
  float: left;
  padding-right: 3em;
}
img.tRight {
  float: right;
}
.div1 {
  width: 50%;
  border-top-left-radius: 20px;
  overflow: hidden;
  background-image: url(images/rottenlargebg.png);
  background-repeat: repeat-x;
  float: left;
}
.div2 {
  display: block;
  overflow: hidden;
  border-top-right-radius: 20px;
  float: left;
}
.div3 {
  width: 50%;
  border: 1px solid red;
  overflow: hidden;
  border-top-right-radius: 20px;
  float: left;
}
strong {
  font-size: 70px;
  color: red;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <title>TMNT - Rancid Tomatoes</title>
  <link rel="stylesheet" href="movie.css">

  <meta charset="utf-8" />
</head>

<body>
  <div>
    <img class="width" src="images/rancidbanner.png" alt="Rancid Tomatoes">
  </div>

  <h1>TMNT (2015)</h1>

  <!---block one--->
  <div class="div1">
    <img class="tLeft" src="images/rottenlarge.png" alt="Rotten" /> <strong>33%</strong>
  </div>

  <!--block two-->
  <div class="div2">
    <img class="tRight" src="images/overview.png" alt="general overview" />
  </div>

</html>

＆＃13;

Answer 1

将float更改为display: inline-block并将text-align: center设置为外部容器。

Answer 2

您可以使用flexboxes将两个元素放在彼此旁边。将两个div放在容器中。将属性display:flex和justify-content:center添加到容器

例如： jsFiddle

旁注：将flex:1添加到每个div中以保持相同的高度。

如何将两个浮动元素彼此相邻？

2 个答案: