並排對齊div，首先取第二個div不需要的整個寬度

Question

我有一行應該顯示標籤和一個按鈕。標籤應該左對齊，按鈕應該正確對齊。標籤應該佔據該按鈕不需要的所有空間。 標籤文本和按鈕文本是動態的，所以不能使用固定長度。

如何在不使用Javascript的情況下實現這一目標？

.label 
 
{ 
 
    background-color: yellow; 
 
    float: left; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    white-space: nowrap; 
 
} 
 

 
.buttoncontainer 
 
{ 
 
    text-align: right; 
 
}

<div class="container"> 
 
    <div class="header"> 
 
    <div class="label">This is the label that could get pretty long so that it has to be made smaller with ellipsis so it doesn't take multiple lines are overflows the button</div> 
 
    <div class="buttoncontainer"> 
 
     <button>Zoom in</button> 
 
    </div> 
 
    </div> 
 
    <div class="#body"> 
 
Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen. Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht – ein geradezu unorthographisches Leben. Eines Tages aber beschloß eine kleine Zeile Blindtext, ihr Name war Lorem Ipsum, hinaus zu gehen in die weite Grammatik. Der große Oxmox riet ihr davon ab, da es dort wimmele von bösen Kommata, wilden Fragezeichen und hinterhältigen Semikoli, doch das Blindtextchen ließ sich nicht beirren. Es packte seine sieben Versalien, schob sich sein Initial in den Gürtel und machte sich auf den Weg. Als es die ersten Hügel des Kursivgebirges erklommen hatte, warf es einen letzten Blick zurück auf die Skyline seiner Heimatstadt Buchstabhausen, die Headline von Alphabetdorf und die Subline seiner eigenen Straße, der Zeilengasse. Wehmütig lief ihm eine rhetorische Frage über die Wange, dann setzte es seinen Weg fort. Unterwegs traf es eine Copy. Die Copy warnte das Blindtextchen, da, wo sie herkäme wäre sie 
 
    </div> 
 
</div>

Answer 1

我被告知使用僅用於表格數據表。但是，這是我能想到的讓JS在沒有JS的情況下工作的唯一方法。沒有必要將div元素更改爲表格元素。它將在CSS中進行控制。

https://jsfiddle.net/xmww2koh/

你的頭將成爲表

.header {display: table} 

和你的其他兩個容器的細胞。然後只在按鈕上放一個寬度。

.label {display: table-cell;} 
.buttonContainer {display: table-cell; width: 100px;} 

這將使標籤佔用按鈕未使用的所有寬度。

Answer 2

選中此項。我設計了使用表格。希望能幫助到你。

.label{ 
 
    background-color: yellow; 
 
    float: left; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    white-space: nowrap; 
 
} 
 
.btn{ 
 
    width: 75px; 
 
}

<div class="container"> 
 
    <table><tr> 
 
    <td class="label">This is the label that could get pretty long so that it has to be made smaller with ellipsis so it doesn't take multiple lines are overflows the button</td> 
 
    <td><button class="btn">Zoom in</button></td> 
 
    </tr></table> 
 
    <div class="#body"> 
 
Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen. Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht – ein geradezu unorthographisches Leben. Eines Tages aber beschloß eine kleine Zeile Blindtext, ihr Name war Lorem Ipsum, hinaus zu gehen in die weite Grammatik. Der große Oxmox riet ihr davon ab, da es dort wimmele von bösen Kommata, wilden Fragezeichen und hinterhältigen Semikoli, doch das Blindtextchen ließ sich nicht beirren. Es packte seine sieben Versalien, schob sich sein Initial in den Gürtel und machte sich auf den Weg. Als es die ersten Hügel des Kursivgebirges erklommen hatte, warf es einen letzten Blick zurück auf die Skyline seiner Heimatstadt Buchstabhausen, die Headline von Alphabetdorf und die Subline seiner eigenen Straße, der Zeilengasse. Wehmütig lief ihm eine rhetorische Frage über die Wange, dann setzte es seinen Weg fort. Unterwegs traf es eine Copy. Die Copy warnte das Blindtextchen, da, wo sie herkäme wäre sie 
 
    </div> 
 
</div>

Answer 3

我相信只用CSS你想達到什麼是不可能的。爲了文本溢出和溢出工作，他們需要一個寬度。

See this snippet from CSS Tricks on how it works。

Answer 4

使用此CSS代碼，希望它能幫助你。

.label 
{ 
    background-color: yellow; 
    float: left; 
    width:85%; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
} 

.buttoncontainer 
{ 
    text-align: right; 
    float:right; 
    width:15%; 
} 

Answer 5

.label 
 
{ 
 
    background-color: yellow; 
 
    float: left; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    white-space: nowrap; 
 
    float:left; 
 
    width:85%; 
 

 
} 
 

 
    
 

 
.buttoncontainer 
 
{ 
 
    text-align: right; 
 
    float:left; 
 
width:15%; 
 
}

<div class="container"> 
 
    <div class="header"> 
 
    <div class="label">This is the label that could get pretty long so that it has to be made smaller with ellipsis so it doesn't take multiple lines are overflows the button</div> 
 
    <div class="buttoncontainer"> 
 
     <button>Zoom in</button> 
 
    </div> 
 
    </div> 
 
    <div class="#body"> 
 
Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen. Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht – ein geradezu unorthographisches Leben. Eines Tages aber beschloß eine kleine Zeile Blindtext, ihr Name war Lorem Ipsum, hinaus zu gehen in die weite Grammatik. Der große Oxmox riet ihr davon ab, da es dort wimmele von bösen Kommata, wilden Fragezeichen und hinterhältigen Semikoli, doch das Blindtextchen ließ sich nicht beirren. Es packte seine sieben Versalien, schob sich sein Initial in den Gürtel und machte sich auf den Weg. Als es die ersten Hügel des Kursivgebirges erklommen hatte, warf es einen letzten Blick zurück auf die Skyline seiner Heimatstadt Buchstabhausen, die Headline von Alphabetdorf und die Subline seiner eigenen Straße, der Zeilengasse. Wehmütig lief ihm eine rhetorische Frage über die Wange, dann setzte es seinen Weg fort. Unterwegs traf es eine Copy. Die Copy warnte das Blindtextchen, da, wo sie herkäme wäre sie 
 
    </div> 
 
</div>