「橡皮條」部分僅在腳註中用css

我已經看過這個問題了很多次，但還沒有看到答案。有沒有辦法使用div和css而不是表格複製下面的行爲？寧願沒有JavaScript。「橡皮條」部分僅在腳註中用css

<style> 
table.footer { 
width:100%; 
} 
td.footer-expandable { 
width:100%; 
border: 1px solid green; 
white-space: nowrap; 
text-overflow: clip; 
} 
td.footer-fixed { 
white-space: nowrap; 
border: 1px solid blue; 
} 
</style> 
.... 
<table class="footer"> 
<tr> 
    <td class="footer-expandable"> 
    Expandable section.<br/> 
    It should expand/collapse as necessary to fill all available space. 
    </td> 
    <td class="footer-fixed"> 
    Fixed width section.<br/> 
    It should expand just enough to fit it's contents. 
    </td> 
</tr>

問題的第二部分是如何剪輯文本中的「擴張」部分，因此它不會自動換行？

來源

2014-12-02 Mike

沒有JS中提供的示例中使用。 – 2014-12-03 02:48:12

我在問如何使用div而不是表格來做同樣的事情。如果佈局改變某處，這將提供更大的靈活性。 – Mike 2014-12-03 12:33:52

我編輯了我的問題，使其更加清晰。 – Mike 2014-12-03 12:39:38

您的意思是？

HTML：

<div id="footer"> 
    <div id="right">Expand just enough to fit</div> 
    <div id="left">This one will fill any remaining space before breaking down to the next line. It will not underflow on the right side do to the right side having a 100% margin height, even if this DIV spans for several lines. It will eventually, and that can be fixed by putting a margin of more than 100%.</div> 
</div>

CSS：

#footer #right { 
    float:right; 
    border:1px solid black; 
    margin-bottom:100%; 
} 
#footer #left { 
    border:1px solid black; 
}

小提琴：http://jsfiddle.net/64chLqdr/1/

注意的#footer寬度將決定margin-bottom:100%是多少。他們將是平等的。

來源

2014-12-03 12:47:46 David

非常聰明的使用底部邊距，我沒有想到這一點。 – Mike 2014-12-03 15:17:12

您可以使用width: calc(100% - 350px)來計算div的寬度。

.wrapper { 
 
    width: 100%; 
 
} 
 
.dynamic { 
 
    border: 1px solid red; 
 
    width: calc(100% - 350px); 
 
    float: left; 
 
    box-sizing: border-box; 
 
} 
 
.fixed { 
 
    border: 1px solid green; 
 
    width: 350px; 
 
    float: left; 
 
    box-sizing: border-box; 
 
}

<div class="wrapper"> 
 
    <div class="dynamic"> 
 
    Expandable section. 
 
    <br/>It should expand/collapse as necessary to fill all available space. 
 
    </div> 
 
    <div class="fixed"> 
 
    Fixed width section. 
 
    <br/>It should expand just enough to fit it's contents. 
 
    </div> 
 
</div>

JSFiddle for responsiveness

來源

2014-12-03 12:48:28 Justinas

我喜歡這個解決方案，但除非我錯了，你必須'硬編碼'在CSS的固定部分的寬度？我不認爲有沒有簡單的方法來解決不同的頁腳不同的寬度，而不訴諸於JavaScript？ – Mike 2014-12-03 15:13:59

「橡皮條」部分僅在腳註中用css

回答

相關問題