如何使一个div拥有固定的尺寸？

Question

我做了一个站点，当你点击按钮30px时，它会更改div内的字体。

我在其中使用了一个包含按钮的ul。当我更改字体大小时，div会扩展并且导航按钮也会随之移动。

如何使其保持固定而字体仍然可以改变。

- Mike Collins

Answer 1

尝试以下 CSS：

#innerbox
{
   width:250px; /* or whatever width you want. */
   max-width:250px; /* or whatever width you want. */
   display: inline-block;
}

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

// 扩展答案

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

#innerbox input
{
   width:150px; /* or whatever width you want. */
   max-width:150px; /* or whatever width you want. */
}

然而，您应该意识到随着文本大小的变化，显示它所需的空间也会发生变化。 因此，容器需要扩展是很自然的。 您应该考虑一下您要做什么；并且可能需要一些预定义的类，在使用JavaScript时进行修改，以确保内容放置完美。

- Kami

---

这对于改变字体的div起作用了，但是我的愚蠢按钮仍然漂浮着:S - Mike Collins

@MikeCollins 我已经扩展了我的答案。如果按钮是固定宽度的，改变文本大小将使文本溢出按钮 - 一些浏览器可能仍然会扩展它们。我认为你需要重新考虑你想要实现的策略。 - Kami

好的，但如果我不知道我想要多宽呢？我想在第一次渲染后保持固定宽度。 - Alex

@Alex，那已经超出了原问题的范围。请开一个新的问题，因为你想要做的与原帖不同。 - Kami

Answer 2

你可以在你的 .css 文件中给它设置最大高度和最大宽度

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

除了您的高度和宽度属性

- Mike

---

好的，它能工作了，但现在按钮会乱动，有没有办法让它保持在原位？ - Mike Collins

Answer 3

这是按钮的自然行为。您可以尝试在父容器上设置max-width/max-height，但我不确定是否有效。

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

另一个选择是使用开发者工具，看看是否可以去除自然填充。

padding: 0;

- Matt Steele

Answer 4

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

- Shailesh kala

Answer 5

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

- Korkut Hacı

---

请尝试解释您的解决方案。 - howie

这个 $ 是什么东西？有人能写一个可读的替代方案吗？ - BitTickler

这个用jQuery更容易。我不想使用document.getElementsByClassName。 - Korkut Hacı

Answer 6

请使用这个样式：

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

- Bharath Kumar