如何使用一個剩餘空間的並排Div？

我的問題是我想要一組並排的div。這些div可以增長到任意高度，因此垂直對齊很重要。正如另一個SO帖子所建議的，爲了解決垂直對齊問題，我有一個類似於此的結構。請幫我填空。在瀏覽器中如何使用一個剩餘空間的並排Div？

<div id="main-container"> 
    <div class="formatter"> 
     <div class="content1"> 
       <!--- I am fixed at 200px ---->    
     </div> 
    </div> 
    <div class="formatter"> 
     <div class="content2"> 
       <!--- I have a rendered element. I don't know exactly how high or wide I am, but I'm not going to take up the whole thing. ---> 
     </div> 
    </div> 
    <div class="formatter"> 
     <div class="content3"> 
       <!--- I have some text and just want to take up the rest of the main container less padding and borders -----> 
     </div> 
    </div> 
</div>

顯示：

Table display

CSS：

#main-container { 
    width: 900px; 
} 

.formatter { 
    display: inline-block; 
    vertical-align: middle; 
} 

.content1 { 
    float: left; 
    width: 200px; 
}

來源

2014-07-12 RandomNews99

我想我一定錯過了你問題的一部分，你告訴我們問題是什麼...... –

沒問題，但當我們不知道問題是什麼時，很難提供幫助。哦，你知道嗎，如果你不想要前端工作，我可以看看你，我的諮詢率是合理的競爭...;） –

也許試着找到一些兩列的佈局。（我敢肯定，你可以找到更多這些，而不是你的問題的確切答案。）然後你做了一個兩列的佈局，其中左列是固定的寬度，右邊是剩下的空間。如果你得到這個工作，那麼也許你可以再次做同樣的事情 - 只有這一次你在左欄內發生同樣的事情。所以你有： '|固定|內容... |' 之後 '| fixed | ... |內容... |' 這可能工作，取決於你會找到什麼樣的解決方案。 –

你需要他們宣告爲table-cell。

來源

2014-07-12 22:26:50 Marvin

謝謝，但有另一種方式嗎？（表格單元格很醜，它是嵌套表格）。我正在擺弄它，讓我們說我想讓中間一列拿起剩下的東西，第一個固定的，第三個變量，然後表格單元格將不起作用。 – RandomNews99

我從twitter引導知道有一個解決方案。檢查示例模板，例如admin /後端示例。 – Marvin

讓我們試着一個非正統的方法

自動寬度和垂直對齊方式使用CSS 柔性顯示

代碼才能獲得基本的佈局，垂直和水平位置（全無填充或邊框或文本的變得非常容易對齊）

<div id="main-container"> 
     <div class="content1">a 
       <!--- I am fixed at 200px ---->    
     </div> 
     <div class="content2">bbb 
       <!--- I have a rendered element. I don't know exactly how high or wide I am, but I'm not going to take up the whole thing. ---> 
     </div> 
     <div class="content3">c 
       <!--- I have some text and just want to take up the rest of the main container less padding and borders -----> 
     </div> 
</div> 


#main-container { 
    width: 900px; 
    display: flex; 
} 

.content3 { 
    flex-grow: 1; 
} 

.content1 { 
    width: 200px; 
}

小提琴 - http://jsfiddle.net/n3CwB/

現在，如果您想要更多地控制內容的對齊方式（如將內容垂直對齊），現在您可能希望保留原始的HTML結構，但這應該讓您開始使用基本佈局。

來源

2014-07-13 01:19:05 Ralph

如何使用一個剩餘空間的並排Div？

回答

相關問題