Question

所以我想要实现的是使用这里的Buff文本填充这里的区域是一张现在看起来如何的图片 http://i.imgur.com/V00gAs8.png但是当我调整浏览器的大小http://i.imgur.com/XlHvWEN.png

时

<div style="overflow: auto;width: 100%; min-height: 41px; max-height: 100%; position: relative;">
        <div style="background-color: #80DE57; color: white; float: right; text-align: center;width:  10%;height: 8%%;max-height:  100%;">BUFF</div>

        <p style="margin: 0 1% 0 1%;word-break: break-all ">
    d   4444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444                                
        </p>
</div>

编辑：我也希望高度始终填写这个div

Answer 1

您的Buff div的宽度为10％，因此当屏幕尺寸减小时，它会自然缩小。给它一个固定的宽度，但使用em单位而不是px单位，以便根据用户使用的文本大小调整大小。例如：

width: 5em;   // (choose a suitable value to give a sensible width

Answer 2

如果你想保持你的宽度：10％，你应该给你的按钮一个最小宽度：

min-width:50px;

Fiddle

Answer 3

从按钮中删除width属性。通过填充调整按钮周围的间距。让按钮根据其中的文本增长。

Answer 4

Updated Code

我使用display: table和display: table-cell

完成了这项工作

HTML

<div class="outer">
        <p class="leftCnt" >
    d   4444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444
        </p>
  <div class="rightCnt" >BUFF</div>
</div>

CSS

.outer {
  overflow: auto;
  width: 100%; 
  min-height: 41px;
  max-height: 100%; 
  position: relative;
  display: table
}
.leftCnt {
  word-break: break-all; 
  display: table-cell
}
.rightCnt {
  background-color: #80DE57; 
  color: white; 
  text-align: center;
  min-width:  50px;
  width: 10%; /*Add this*/
  display: table-cell; 
  vertical-align:middle
}

响应式按钮设计

4 个答案: