水平對齊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的容器

回答

相關問題