創建單行項目，沒有固定寬度

我一直在試圖構建一個HTML/CSS結構，它會產生類似於我附加的圖像。我正在尋找開發一個容器，其中包含可變數量的內聯元素，只有其中一個元素填充其他內聯元素不包含的元素。創建單行項目，沒有固定寬度

我已經看到了一些浮動的解決方案，但它們似乎總是處理固定寬度的元素，那麼填充剩餘空間的元素將被設置爲99％。我之前已經問過這個問題（現在剛剛刪除了這篇文章），我希望這篇文章能更好地解釋我想要做的事情。我真的在尋找一種沒有JavaScript修復的方式，所以我可以將它應用到任何地方，而不必隨身攜帶代碼。

enter image description here

來源

2014-02-12 EHorodyski

我認爲這是你在找什麼： http://jsfiddle.net/FF3LJ/1/

的0的是有代表不同的寬度。

HTML

<ul> 
<li> 
    <div class="float-left">000</div> 
    <div class="float-right">00000000</div> 
    <div class="float-right">0</div> 
    <div class="fill-the-void"> 
     <span>Lorem ipsum lkasdgj dlagkjas dglkajsd glaskdjgasdgk lksadgjalskdgj lkj</span> 
    </div> 
</li> 
<li> 
    <div class="float-left">0000000000</div> 
    <div class="float-right">000</div> 
    <div class="float-right">00000</div> 
    <div class="fill-the-void"> 
     <span>Lorem ipsum lkasdgj dlagkjas dglkajsd glaskdjgasdgk lksadgjalskdgj lkj</span> 
    </div> 
</li> 
<li> 
    <div class="float-left">0</div> 
    <div class="float-right">0000000000</div> 
    <div class="float-right">0</div> 
    <div class="fill-the-void"> 
     <span>Lorem ipsum lkasdgj dlagkjas dglkajsd glaskdjgasdgk lksadgjalskdgj lkj</span> 
    </div> 
</li>

CSS

ul { list-style:none; margin:0; padding:0; } 
li { height:20px; margin:0 0 10px; padding:0; overflow:hidden; } 
li div { height:20px; background:#fff; } 
.float-left { background:#f93; float:left; margin-right:5px; } 
.float-right { background:#f93; float:right; margin-left:5px; } 
.fill-the-void { text-overflow:ellipsis; overflow:hidden; white-space:nowrap; } 
.fill-the-void span { background:#f3c; }

來源

2014-02-12 17:54:30 willanderson

這工作非常漂亮，並指出複製顏色（我用它們作爲視覺指示，我沒有真正使用它們:)。我擔心的是這種方法有點難以教授。我希望使用此代碼的開發人員能夠按順序放置其「列」，而不必擔心添加浮點類，但這對於CSS來說可能是不可能的。 – EHorodyski

我認爲你低估了你的開發者！ :)我沒有辦法做到這一點沒有浮動，但是因爲浮動是CSS，我會想象重新命名類匹配的內容實際上會讓任何人都更容易理解。開發人員只需要知道html結構，這是任何開發的給定。例如：http://jsfiddle.net/vyW94/1/ – willanderson

我已經有幾個小時燉過這個，你在說什麼迴應我一直在想什麼。很多我們的開發人員都非常喜歡WPF/XAML，在這種情況下這不是問題，所以我儘可能地簡化事情。不幸的是，CSS提出了一個挑戰，代表我按照邏輯順序發佈的內容你的例子很漂亮，你提出了一個很好的解決方案。我希望我可以給你更多的聲譽，比upvoting和檢查這是正確的。感謝您的幫助，併爲了社區的緣故，請繼續貢獻。 – EHorodyski

如果我理解正確的，你可以只使用百分比根據自己需要多大的空間佔用設置每個橙色元素的寬度。添加元素時，只需減少佔用的空間百分比即可。紫色元素將填滿空間的其餘部分。看到這個小提琴：http://jsfiddle.net/p2qUK/

在這種情況下，容器的寬度設置爲100%，但您可以根據您的需要調整它。

來源

2014-02-12 17:26:26 dpwivagg

的事情是，我不知道的百分比。它可能會根據項目和案例來改變項目。我想盡可能通用。 – EHorodyski

對於純粹的CSS，我認爲你能做的最好的就是將文本溢出一行。 See this JSFiddle。

CSS

* { box-sizing: border-box; } 
.thumbnail { 
    float: left; 
    margin-right: 10px; 
} 
.content { 
    max-height: 50px; 
    max-width: 100%; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
    line-height: 50px; 
}

HTML

<div class="container"> 
    <div class="thumbnail"> 
     <img src="http://placehold.it/50x50" /> 
    </div> 
    <div class="content"> 
     Ut auctor enim et, magna purus augue magna placerat placerat aliquam cum enim tortor nunc amet nisi urna, ac porta urna auctor in dignissim, aenean mus turpis augue ridiculus dictumst non mus, mattis, turpis, sociis aliquam. Eros sed aliquet, porta! 
    </div> 
</div>

來源

2014-02-12 17:39:25 dward

創建單行項目，沒有固定寬度

回答

相關問題