如何防止一个元素被窗口大小调低？

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

如何防止一个元素被窗口大小调低？

回答

相关问题