2014-04-26 195 views
1

我有一個帶文本的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> 

Link to sourcebox

+1

重要的是保持你有的標記,即表格和div按照你現在的具體順序? &你認爲黑色方塊應該是藍色的? –

+1

請在這裏添加有意義的代碼和問題描述。請不要將 鏈接到需要修復的網站 - 否則,一旦問題得到解決,此問題將會丟失未來訪問者的任何價值 。發佈 [簡短,獨立,正確的示例(SSCCE)](http://www.sscce.org/) ,這表明您的問題將幫助您獲得更好的答案。有關更多信息,請參閱 [我的網站上的某些內容不起作用。我可以只粘貼一個鏈接到 它嗎?](http://meta.stackexchange.com/questions/125997/)謝謝! – j08691

+0

@ j08691,謝謝 – moldcraft

回答

1

使用EM相對填充。

Sourcebox

我剛添加padding-right:1.15em.size-maker

.size-maker { 
    font-size: 20px; 
    color: white; 
    padding-right: 1.15em; 
} 

當元件或父元素字體大小的1EM = 100%。

在這種情況下,1.15em將是20px(font-size)的115%。

+0

謝謝! 'em'完成了技巧http://sourcebox.io/60e3673bbfc8aaac84165495dfc658bb/html – moldcraft

+0

我使用這個https://github.com/moldcraft/adaptive-switch創建了一個jQuery插件 – moldcraft