将容器与 3 个 div 水平对齐答案

【问题标题】：Align container with 3 divs horizontally将容器与 3 个 div 水平对齐
【发布时间】：2017-09-04 17:56:55
【问题描述】：

我尝试制作一个包含 3 个 div 的容器，以使三个盒子水平排列。中心框的顶部和底部不与左侧框对齐，第三个框远低于前两个框。我对此进行了一些研究，但我试图做出的改变并没有改变这一点。

非常感谢！

Link that shows photo of final page and the issue that I am having

HTML代码：

<div class="container">
<div class="left">
<p>
Tarata Community Engagement
</p>
<a href="http://www.onlythebridge.com/?page_id=28" class="tarata" target="_blank"><img src="tarata.jpg" width="400" height="267" alt="Tarata Community Engagement Project" /></a></div>
<div class="center">
<p>
Santa Rosa Community Engagement
</p>
<img src="santa-rosa.jpg" width="400" height="267" alt="Santa Rosa Community Engagement Project" />
</div>
<div class="right">
<p>
Our histories are unique. The places that we root ourselves, the communities that we are part of, and the ways those relationships change over time are both personal and shared experiences. 
<br><br>
What place/s are meaningful to you? Why? <br>
What are your roots? What do they mean to you in your life?<br>
How do you carry meaningful places and your roots with you? <br>
What is home to you? <br>
Have you left any places or communities behind, what's that like? 
</p></div>
</div>

xhtml 文档中的样式代码：

.container {
width:100%;
height:100%;
text-align:left;

}
.left {
float: left;
margin-left:100px;
max-width: 300px;

}
.center {
float: center;
margin-left: 650px;
max-width: 300px;

}
.right {
float: right;
margin-right: 100px;
max-width: 410px;

}

【问题讨论】：

??浮动：中心？您在哪里发现可能是 float 的值？

标签： html css containers

【解决方案1】：

这有帮助吗？您可以使用 flex 来对齐三列，就像您尝试做的那样。 Flex 在 IE 中不起作用 (http://caniuse.com/#feat=flexbox)

.container {
  /* Important for columns */
  display: -webkit-flex;
  display: flex;
  flex-wrap:wrap; /*EDIT: will wrap into 1 column if screen small */
}

.item {
  /* Important for columns */
  flex: 1 1 0;
  border: 3px solid #808080;
  height: 52px;
  padding: 10px;
}


/* Remove duplicate borders */

.item-2 {
  border-left: none;
  border-right: none;
}

<div class="container">

  <div class="item item-1">
  Image or text here - 1
  </div>
  
  <div class="item item-2">
  Image or text here - 2 
  </div>
  
  <div class="item item-3">
  Image or text here - 3
  </div>
  
</div>

【讨论】：

是的，这确实有帮助！它没有响应，但它有很大帮助。非常感谢。
@caverbook 响应式是什么意思？ 1排3，改变屏幕宽度时变成3排1？或者别的什么。
如果您将flex-wrap:wrap; 添加到容器中，它的行为可能更像您想要的。我已经更新了我的答案。

【解决方案2】：

不幸的是，没有浮动：居中。

请咨询this Stack Overflow question，因为它可能会让您更好地了解该怎么做。如果您可以使用 flex，上述方法也可以使用！

【讨论】：