将容器水平对齐3格 [英] Align container with 3 divs horizontally

问题描述

我尝试制作一个3格的容器，使三个盒子水平排列。中间框的顶部和底部与左侧框未对齐，并且第三个框远低于前两个框。我对此进行了一些研究，但我尝试进行的更改并没有改变。

I have tried making a container with 3 divs to make three boxes line up horizontally. The center box doesn't align at the top and bottom with the left box and the third box is far below the first two. I researched a bit about this but the changes I tried to make didn't change this.

非常感谢！

显示最后一页照片和我遇到的问题的链接

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 doc中的样式代码：

Styling code in xhtml doc:

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

}

推荐答案

帮帮我？您可以像尝试使用flex来对齐三列。 Flex在IE中不起作用（ http://caniuse.com/#feat=flexbox ）

Does this help? You can use flex to align three columns like you're trying to do. Flex does not work in 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>

这篇关于将容器水平对齐3格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！