对齐HTML项目

Question

我有一个包含3个div的div。

original

HTML代码

.state {
  background-color: rgba(233, 234, 237, 0.9);
  height: 7vh;
  width: 80%;
  border-radius: 14px;
  margin: 10px 0 15px 80px;
  display: flex;
  align-items: stretch;
}

.state-main {
  text-align: center;
  padding-top: 10px;
  font-weight: 900;
  font-size: 14px;
}

.options {
  text-align: right;
  margin-bottom: 10px;
}

.owner-image {
  border-top-left-radius: 14px;
  border-bottom-left-radius: 14px;
}

<div class="state">

  <div class="owner">
    <img class="owner-image" src="img/uk.jpg">
  </div>
  <div class="state-main">
    <p class="state-name">PENNSYLVANIA</p>
  </div>
  <div class="options">
    <p id="time"></p>
    <button>SEND TROOPS</button>
    <button>ATTACK</button>
  </div>

</div>

Answer 1

使用flexbox（browser support）。

.state {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 80px;
  background-color: lightgray;
}

.state,
.btns button {
  text-transform: uppercase;
}

<div class="state">
  <img src="http://placehold.it/150x80/fc0">
  <p>
    Pennsylvania
  </p>
  <div class="btns">
    <button>Send Troops</button>
    <button>Attack</button>
  </div>
</div>

**对于IE9及更早版本，您需要提供后备。您是否需要这样做取决于目标受众。

Answer 2

.State是包含所有3. .state-main的div是黄色div，应该位于中心。 .options是绿色div应该是最右边的。 .owner-image是红色div，应该留在同一个地方。

使用flex将布局放置到位。

＆＃13;

＆＃13;

.state {
  display: flex;
  justify-content: space-between;
}

.state-mail {
  text-align: center;
}

＆＃13;

<div class="state">
  <div class="owner-image">
    <img src="http://placehold.it/100x50" />
  </div>
  <div class="state-main">PENNSYLVANIA</div>
  <div class="options"><button>SEND TROOPS</button><button>ATTACK</button></div>
</div>

＆＃13;

＆＃13;

＆＃13;