自動拉伸表格單元div css

我知道還有很多類似的問題，但沒有一個幫助我解決這個問題。我有非常簡單的設置：自動拉伸表格單元div css

<div class="wrapper"> 
    <div class="dontBreakmyLine"> 
     Some generated text 
    </div> 
    <div class="iCanUseWhatIsLeft"> 
     Another generated text 
    </div> 
</div>

和CSS至今：

.wrapper { 
    width: 100%; 
    display: table; 
} 

.dontBreakmyLine { 
    display: table-cell; 
} 

.iCanUseWhatIsLeft { 
    display: table-cell; 
}

現在我需要伸展第一個div內容，並讓另一個人拿剩餘空間。我知道在第一個div中生成文本的最大寬度將是300px，但最大寬度不會在這裏工作，因爲我願意。有什麼建議嗎？

來源

2013-10-11 Gatekeeper

將第一個浮動到左邊......？ – CBroe

借調。這不是什麼表格。 –

有可能是一個更好的辦法，但如果你沒事用線不破就可以左單元設置爲較小的寬度和設置文本沒有對空格

打破這裏是一個小提琴

http://jsfiddle.net/hqWaU/

.wrapper { 
    width: 100%; 
    display: table; 
} 
.dontBreakmyLine { 
    display: table-cell; 
    width: 1px; 
    white-space:nowrap; 
} 
.iCanUseWhatIsLeft { 
    display: table-cell; 
} 
div { 
    border: 1px solid silver; 
}

來源

2013-10-11 14:29:57 Smeegs

這種方法的優點是兩個子元素將保留在一條線上，對於浮動塊或內聯塊不一定是這樣。 –

這個解決方案非常棒，我完全忘了'white-space：nowrap;'。謝謝！ – Gatekeeper

而不display: table;一種可能的解決方案將是兩個框設置爲position: relative;，浮動的左側和拉伸權利一個與right: 0px;（ DEMO）。

.wrapper { 
    width: 100%; 
} 

.dontBreakmyLine { 
    max-width: 300px; 
    float: left; 
    position: relative; 
    z-index: 2; 
} 

.iCanUseWhatIsLeft { 
    position: relative; 
    right: 0px; 
    z-index: 1; 
}

文本將盡快它比300px休息一會兒，但如果它不會更長也沒關係。如果您不希望左側文本下面顯示正確的文本流，請將display: table-cell添加回框中。

如果您仍然不想防止換行，您可以使用white-space:nowrap;，甚至可以結合使用overflow: hidden;（DEMO）。

來源

2013-10-11 14:33:50

自動拉伸表格單元div css

回答

相關問題