Html 如何使div具有固定大小？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14526071/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make a div have a fixed size?
提问by Mike Collins
I made a site so when you click the button 30px it changes the font inside the div.
我创建了一个站点，因此当您单击 30px 按钮时，它会更改div.
I have a ulinside it with the bottons. When I change the size of font the divexpands and the nav buttons move with it as well.
我有一个ul里面有按钮。当我更改字体大小时，div会扩展并且导航按钮也随之移动。
How do i make it so it stays fixed but the fonts can still change.
我如何使它保持固定但字体仍然可以改变。
回答by Kami
Try the following css:
试试下面的css：
#innerbox
{
width:250px; /* or whatever width you want. */
max-width:250px; /* or whatever width you want. */
display: inline-block;
}
This makes the div take as little space as possible, and its width is defined by the css.
这使得 div 占用尽可能少的空间，其宽度由 css 定义。
// Expanded answer
// 扩展答案
To make the buttons fixed widths do the following :
要使按钮固定宽度，请执行以下操作：
#innerbox input
{
width:150px; /* or whatever width you want. */
max-width:150px; /* or whatever width you want. */
}
However, you should be aware that as the size of the text changes, so does the space needed to display it. As such, it's natural that the containers need to expand. You should perhaps review what you are trying to do; and maybe have some predefined classes that you alter on the fly using javascript to ensure the content placement is perfect.
但是，您应该注意，随着文本大小的变化，显示它所需的空间也会发生变化。因此，容器需要扩展是很自然的。你或许应该回顾一下你正在尝试做的事情；并且可能有一些预定义的类，您可以使用 javascript 动态更改这些类以确保内容放置是完美的。
回答by Mike
you can give it a max-height and max-width in your .css
你可以在你的 .css 中给它一个 max-height 和 max-width
.fontpixel{max-width:200px; max-height:200px;}
in addition to your height and width properties
除了你的高度和宽度属性
回答by Matt Steele
Thats the natural behavior of the buttons. You could try putting a max-width/max-height on the parent container, but I'm not sure if that would do it.
这就是按钮的自然行为。您可以尝试在父容器上放置最大宽度/最大高度，但我不确定这是否可行。
max-width:something px;
max-height:something px;
The other option would be to use the devlopr tools and see if you can remove the natural padding.
另一种选择是使用 devlopr 工具，看看是否可以删除自然填充。
padding: 0;
回答by Shailesh kala
<div>
<img src="whatever it is" class="image-crop">
</div>
/*mobile code*/
.image-crop{
width:100%;
max-height: auto;
}
/*desktop code*/
@media screen and (min-width: 640px) {
.image-crop{
width:100%;
max-height: 140px;
}
回答by Korkut Hac?
<div class="ai">a b c d e f</div>
<div class="ai">a b c d e</div>
<div class="ai">a b c d</div>
<script>
function _w(a) {
var _maxw = 0;
$(a).each(function(){
var _w = $(this).width();
_maxw = (_w >= _maxw) ? _w : _maxw;
});
$(a).width(_maxw);
}
_w('.ai');</script>
回答by Bharath Kumar
Use this style
使用这种风格
<div class="form-control"
style="height:100px;
width:55%;
overflow:hidden;
cursor:pointer">
</div>
