Css 如何使div具有固定的大小？

我创建了一个站点，因此当您单击按钮30px时，它会更改

div

中的字体

我有一个

ul

和botton在里面。当我更改字体大小时，

div

将展开，导航按钮也随之移动

---

如何使其保持固定，但字体仍可以更改。

您可以在.css中为其指定最大高度和最大宽度

.fontpixel{max-width:200px; max-height:200px;}

---

除了高度和宽度属性之外，这也是按钮的自然行为。您可以尝试在父容器上放置一个max-width/max-height，但我不确定这样做是否可行

max-width:something px;
max-height:something px;

另一个选择是使用devlopr工具，看看是否可以删除自然填充

padding: 0;

尝试以下css：

#内框
{
宽度：250px；/*或您想要的任何宽度*/
最大宽度：250px；/*或您想要的任何宽度*/
显示：内联块；
}

这使得div占用尽可能少的空间，其宽度由css定义

//扩展答案

要使按钮固定宽度，请执行以下操作：

#内框输入
{
宽度：150px；/*或您想要的任何宽度*/
最大宽度：150px；/*或您想要的任何宽度*/
}

但是，您应该知道，随着文本大小的变化，显示文本所需的空间也会随之变化。因此，容器需要膨胀是很自然的。你也许应该回顾一下你正在尝试做的事情；并且可能有一些预定义的类，您可以使用javascript动态更改这些类，以确保内容的位置是完美的。

使用这种样式

<div class="form-control"
     style="height:100px;
     width:55%;
     overflow:hidden;
     cursor:pointer">
</div>

/*移动代码*/
.图像裁剪{
宽度：100%；
最大高度：自动；
}
/*桌面代码*/
@媒体屏幕和屏幕（最小宽度：640像素）{
.图像裁剪{
宽度：100%；
最大高度：140像素；
}

a b c d e f//大约100px
a b c d e/~80
a b c d/~60
功能_reWidthAll_div（类名）{
var_maxwidth=0；
$（类名）。每个（函数（）{
var_width=$（this）.width（）；
_maxwidth=（\u width>=\u maxwidth）？\u width:\u maxwidth；//定义最大宽度
});    
$（classname）.width（_maxwidth）；//返回所有div的相同宽度
}
_重新布线的大厅分区（'.ai'）；

好的，它工作了，但现在按钮到处移动，有没有办法让它保持在原来的位置？这对改变字体的div有效，但现在我的愚蠢按钮仍然在浮动：S@MikeCollins我已经扩展了我的答案。如果按钮的宽度是固定的，那么改变文本的大小会使文本从按钮中流出——有些浏览器是m我仍然可以扩展它们。我认为你需要重新考虑你的策略，以实现你想要实现的目标。好吧，但如果我不知道我想要什么宽度，我想在第一次之后保持固定宽度render@Alex这超出了原始问题的范围。请打开一个新问题，因为您的目标与OP不同。请尝试解释您的解决方案n、 这是什么$stuff？有人能写一个可读的替换吗？使用jquery更容易。我不想使用document.getElementsByClassName

<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;
      }

<div class="ai">a b c d e f</div> // something like ~100px
<div class="ai">a b c d e</div> // ~80
<div class="ai">a b c d</div> // ~60 

<script>

function _reWidthAll_div(classname) {

var _maxwidth = 0;

    $(classname).each(function(){

    var _width = $(this).width();

    _maxwidth = (_width >= _maxwidth) ? _width : _maxwidth; // define max width
    });    

$(classname).width(_maxwidth); // return all div same width

}

_reWidthAll_div('.ai');

</script>