如何防止一個元素被窗口大小調低？

HTML

<div id='main'> 
    <div class='container'> 
     <input type='text' class='input-field'></input> 
     <span class='foo'>hello</span> 
    </div> 
</div>

CSS

#main 
{ 
    border:1px solid red; 
    width: 100%; 
    height: 300px; 
} 
.input-field 
{ 
    border: 1px solid blue; 
    width:70%; 
}

在的jsfiddle，如果拖動瀏覽器窗口水平縮小尺寸，在某些時候，SPAN包含「hello」文本將被推下。

如何設置我的樣式，以便只減少文本字段寬度？

來源

2013-07-20 masato-san

「Hello」在瀏覽器大小小於200px的時候出現故障。設備上的最小分辨率是320px寬（電話），所以我不明白這裏有什麼問題。你的代碼工作正常，直到它達到小於約。爲200px; –

嘗試增加white-space: nowrap到`.container：

.container { 
    white-space: nowrap; 
}

，或者嘗試使用Flexbox的（這包括新舊語法）：

.container { 
    display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6 */ 
    display: -moz-box;   /* OLD - Firefox 19- (buggy but mostly works) */ 
    display: -ms-flexbox;  /* TWEENER - IE 10 */ 
    display: -webkit-flex;  /* NEW - Chrome */ 
    display: flex; 
}

來源

2013-07-20 00:18:19 kalley

另一種選擇可以是，指定MIN-寬度，你想和溢出定義爲自動，

這將確保div仍然是流動和擴大，但停止承包頁結構明星TS越來越搞砸了，並且用戶可以滾動

http://jsfiddle.net/5MjNL/6/

#main 
{ 
    border:1px solid red; 
    width: 100%; 
    min-width:300px; 
    height: 300px; 
    overflow: auto; 

} 

.input-field 
{ 
    border: 1px solid blue; 
    width:70%; 
} 
.foo{ 

} 
}

來源

2013-07-20 00:26:33 user2580076

如果你真的想這樣的行爲，你可以考慮使用百分比。你可以但不必這樣做：

#main{ 
    width:/*percentage of choice here*/; 
} 
.contianer{ 
    width:/*percentage of choice here*/; 
} 
.input-field{ 
    width:/*percentage of choice here*/; 
} 
.foo{ 
    width:/*not a percentage width here*/; 
}

來源

2013-07-20 00:47:19 PHPglue

如何防止一個元素被窗口大小調低？

回答

相關問題