水平对齐3个div的容器

我试过用3个div制作一个容器，使三个水平排列。中央盒子的左上方和右下方不对齐，第三个盒子远远低于前两个。我对此进行了一些研究，但是我试图做出的改变并没有改变这一点。水平对齐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; 

}

来源

2017-04-09 caverbook

??浮动：中心？你在哪里发现这可能是浮动的可能值？ –

这是否帮助？您可以使用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>

来源

2017-04-09 18:48:21 blackandorangecat

是的，这确实有帮助！它没有响应，但它有很大帮助。非常感谢。 – caverbook

@caverbook你是什么意思的反应？当屏幕宽度改变时，1行3行，1行3行？或者是其他东西。 – blackandorangecat

如果将'flex-wrap：wrap;'添加到容器，它可能表现得更像你想要的。我已经更新了我的答案。 – blackandorangecat

没有一个浮动：中心很遗憾。

咨询this Stack Overflow question，因为它可能会让您更好地了解该做什么。如果你可以使用flex，上面的工作也是如此！

来源

2017-04-09 19:03:09

水平对齐3个div的容器

回答

相关问题