动态高度容器中的图像宽度不会影响容器宽度

我有一个带文本的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

来源

2014-04-26 moldcraft

重要的是保持你有的标记，即表格和div按照你现在的具体顺序？＆你认为黑色方块应该是蓝色的？ –

请在这里添加有意义的代码和问题描述。请不要将链接到需要修复的网站 - 否则，一旦问题得到解决，此问题将会丢失未来访问者的任何价值。发布 [简短，独立，正确的示例（SSCCE）]（http://www.sscce.org/），这表明您的问题将帮助您获得更好的答案。有关更多信息，请参阅 [我的网站上的某些内容不起作用。我可以只粘贴一个链接到它吗？]（http://meta.stackexchange.com/questions/125997/）谢谢！ – j08691

@ j08691，谢谢 – moldcraft

使用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％。

来源

2014-04-26 23:05:50

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

我使用这个https://github.com/moldcraft/adaptive-switch创建了一个jQuery插件 – moldcraft

动态高度容器中的图像宽度不会影响容器宽度

回答

相关问题