響應按鍵設計

所以我想要做到的，是讓這個div與淺黃色的文字裏面填寫這裏的區域是它的樣子，現在的圖片 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

來源

2015-06-12 Higeath

嘗試運用在寬度，而不是百分比像素做到了。例如：'width：50px'。爲了使其響應，您可以通過@media斷點進行調整並應用特定的寬度。 – Renesansz

你的Buff div有10％的寬度，所以自然就會萎縮，因爲屏幕尺寸的減小。給它一個固定的寬度，但使用em單位而不是px，這樣大小將根據用戶正在使用的文本大小進行調整。例如：

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

來源

2015-06-12 12:52:53 GuyH

這有助於寬度如何高度雖然？ – Higeath

如果您想保留您的寬度：10％，比你應該給你的按鈕的最小寬度：

min-width:50px;

Fiddle

來源

2015-06-12 12:55:49 Tatyana

從按鍵上移開width屬性。通過填充調整按鈕周圍的間距。讓按鈕根據其中的文字增長。

來源

2015-06-12 12:56:10

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 
}

來源

2015-06-12 13:13:34 Tushar

這個佈局只有幾個字母，不是整行，右邊的按鈕佔寬度的80％http://i.imgur.com/y90TTmK.png – Higeath

加'寬度：10％;' .rightCnt – Tushar

響應按鍵設計

回答

相關問題