我有一個帶文本的div
,我想在文本之後的右側創建一個方形空間。動態高度容器中的圖像寬度不會影響容器寬度
我不能只設置一個固定的padding-right
,因爲我想讓它適用於任何文本大小。
這是我有:
<div class="wrapper">
<table class="size-maker" cellpadding="0" cellspacing="0">
<tr>
<td>Hello!</td>
<td class="ratio-1x1">
<!-- just 1x1 transparent image to maintain 1x1 aspect ratio when resized -->
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAApJREFUCB1jYAAAAAIAAc/INeUAAAAASUVORK5CYII=" />
</td>
</tr>
</table>
<div class="content"></div>
</div>
<style type="text/css">
.wrapper {
background: #0055cc;
position: relative;
display: inline-block;
}
.size-maker {
font-size: 20px;
color: white;
}
.size-maker .ratio-1x1 {
height: 100%; /* need for FireFox */
}
.size-maker .ratio-1x1 img {
height: 100%;
background: rgba(0,0,0,0.5);
}
.content {
background: #00DD00;
position: absolute;
top: 150%;
left: 0;
width: 100%;
height: 100%;
}
</style>
<br/><br/><br/><br/><br/>
<h3>Task</h3>
<p>Black square should be inside of blue, and green square should have the size of both blue+black</p>
<p style="color: gray;"><em>This should work for any font size <b><code>.size-maker { font-size: ...px; }</code></b></em></p>
重要的是保持你有的標記,即表格和div按照你現在的具體順序? &你認爲黑色方塊應該是藍色的? –
請在這裏添加有意義的代碼和問題描述。請不要將 鏈接到需要修復的網站 - 否則,一旦問題得到解決,此問題將會丟失未來訪問者的任何價值 。發佈 [簡短,獨立,正確的示例(SSCCE)](http://www.sscce.org/) ,這表明您的問題將幫助您獲得更好的答案。有關更多信息,請參閱 [我的網站上的某些內容不起作用。我可以只粘貼一個鏈接到 它嗎?](http://meta.stackexchange.com/questions/125997/)謝謝! – j08691
@ j08691,謝謝 – moldcraft