中心科3列響應CSS佈局無法適應

http://jsfiddle.net/nicorellius/YNyHW/7/

我的目標是預先存在的模塊化單元添加到中心div ，類別爲two-inner。標記如下：

<html> 
<head></head> 
<body> 
<div> 
    <div class="container">  
     <div class="one"> 
      <div class="one-inner"></div> 
     </div>    
     <div class="two"> 
      <div class="two-inner"></div> 
     </div>      
     <div class="three"> 
      <div class="three-inner"></div> 
     </div>  
    </div> 
</div> 
</body> 
</html>

該CSS可以在fiddle中看到。部分模塊化單元實際上是由一些PHP構建而成的，其中來自數據庫的一些數據被提取並顯示。我有一些陣列可用於模擬6個條目的測試，併爲模塊化單元提供2寬3高的盒子佈局。我的問題是，當我把這個單元添加到上面的佈局中時，我得到了類似下面的測試站點。

爲模塊化單元標記是像這樣：

<section class="unit"> 
    <section class="buttons margin-top-2em"> 
     <div class="button-fixed-width"> 
      <button type="button" class="<bootstrap-button>">button 1</button> 
     </div> 
     <div class="button-fixed-width"> 
      <button type="button" class="<bootstrap-button>">button 2</button> 
     </div> 
     <div class="button-fixed-width"> 
      <button type="button" class="<bootstrap-button>">button 3</button> 
     </div> 
    </section> 
    <div class="row"> 
     <?php // loop through some arrays to get module unit ?> 
    </div> 
</section>

我已經嘗試了各種調整，試圖得到它，但也不是使外類one的高度的唯一的事情， two和three接近零。

雖然我試過改變高度和其他位以使它適合，但我仍然無法弄清楚爲什麼中心div不會升高。我錯過了什麼？

unit類的CSS處於小提琴中。就它自己而言，它工作正常，並且我有一些斷點將其摺疊到一個列中。我只是不能獲得通過這部分...

編輯

試圖從@ kozlovski5一些想法後，我能夠得到div上下移動，因爲我需要。但有一件事情讓我感到不安。我不太熟悉display: table,display: table-cell佈局，所以我確定我錯過了一些東西。例如，當我向相關的div添加文本時，無論是one,two還是three類，或內部類，@ kozlovski5推薦的調整都會消失。所以換句話說，如果我不使用top: -37.5em;，只是用文本填充div，那麼一切似乎都應該如此。這是當我嘗試使用邊框部分對佈局進行建模時，我得到了奇怪的行爲。

我結束了去浮標代替。參見上面的測試網站進行最終的測試

來源

2013-11-02 nicorellius

嘗試刪除類<引導按鈕> – 2013-11-02 20:08:54

我補充說，這樣你就知道它是什麼它。 ..這真的是一組按鈕類，使按鈕看起來像它一樣：'btn btn-primary btn-lg btn-block'等... – nicorellius

我申請：

div > .modular { 
    display: block; 
}

這似乎解決問題。這裏是一個更新的jsFiddle。 http://jsfiddle.net/YNyHW/4/

OP提供了一個測試用例他的網站，所以我更新的答案是：

.two-inner { 
    background-color: #cba; 
    border: 1px solid gray; 
    display: block; 
    width: 100%; 
    height: 100%; 
    position: relative; 
    top: -596px; 
    left: 0; 
}

Ugghhh ..另一編輯

我認爲整個display: table和div > div. { display: table-cell;}是造成這個問題，而不是工作的補丁讓我們直接打問題頭，而不是在修復工作。

剛剛擺脫了顯示錶等，並使用浮動，而不是這裏有一個例子： http://jsfiddle.net/YNyHW/6/

來源

2013-11-02 20:28:43

謝謝。我已經嘗試了您的建議，但不起作用。我確實看到它在你提供的小提琴中工作，但因爲我沒有提供所有的代碼拼湊我的問題，我相信我錯過了一些東西。我會試着去追蹤它。 – nicorellius

你可以隨時編輯你的問題，並改進它，也許鏈接到測試用例（網站），也許你遇到的下一個問題後，給定的解決方案等。但如果你發現這個問題有用接受它。 – 2013-11-02 20:55:01

我正在努力讓它在測試服務器上現在... – nicorellius

中心科3列響應CSS佈局無法適應

回答

相關問題