对齐 HTML 项目答案

【问题标题】：Align HTML items对齐 HTML 项目
【发布时间】：2017-06-07 02:40:04
【问题描述】：

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

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>

【问题讨论】：

请张贴您的html。您可以使用</> 图标在此处嵌入实时示例
查看这篇文章：stackoverflow.com/questions/2156712/…这是你想要实现的吗？
尝试添加margin-right:auto;和左边距：自动；到你的 3 个 div 。
@PriyeshKumar 我添加了 html 代码。

标签： html css

【解决方案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 和更早的版本，您需要提供备用。您是否需要这样做取决于目标受众。

【讨论】：

然后呢？ Flexbox Support。 OP没有提到限制所以......
而且 - 因此，对于您的公司可以控制允许的浏览器的 Intranet 应用程序，这可能是一个不错的选择。但是，如果您希望您的面向公众的网站无论是否拥有最现代的浏览器都能很好地显示出来，那么使用依赖 CSS3 的方案并不是一个好主意。
哈哈，好吧。如果您支持 IE9 或更低版本，也许可以。有很多大型网站都支持flexbox。 Flexbox 是现代 Web 开发的一部分。如果 OP 说，“需要支持 IE8+”，我的回答会有所不同或根本没有回答。 OP 对请求没有任何限制，因此提供了一个简单、现代、易于理解的答案。
讲座可能会有所帮助，但在这种情况下，这是没有根据的。全球 98% 的浏览器都支持 Flexbox：caniuse.com/#search=flex
对于那些想要缩小 2% 差距的人来说，这里有一些很好的解决方案：stackoverflow.com/q/33359157/3597276

【解决方案2】：

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

使用 flex 将布局放置到位。

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

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

<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>

【讨论】：