无法将 DIV 调整为小于最大宽度的任何内容答案

【问题标题】：Cannot Resize DIV to anything smaller than maximum width无法将 DIV 调整为小于最大宽度的任何内容
【发布时间】：2012-10-27 04:50:52
【问题描述】：

快速 CSS 问题。我似乎无法弄清楚一个非常简单的 CSS/HTML 问题。这是一个 JSFiddle。

http://jsfiddle.net/BmM6t/

基本上，这两个 div 不会调整到小于 100% 宽度的任何东西：

<div id="main_pic" class="main_div">
   THIS IS WHERE THE MAIN PIC WILL GO.
</div>
<div id="signin" class="main_div">
   SIGN IN TO THE SITE!
   <form>
       <label for="name">EMAIL/USERNAME:</label>
       <input type="text" name="name" id="name">
       <label for="email">PASSWORD:</label>
       <input type="text" name="email" id="email">
       <br />
       <input type="submit" value="Let's Play!">
   </form>
</div>

您会看到两个具有 main_div 类的 div 出于某种原因实际上占据了屏幕的整个宽度（如果您检查元素，您可以看到），即使它们的宽度写得很清楚。当您尝试更改其中一个 main_div 的宽度时，它会更改宽度，但如果您检查元素，它只会更改对象的宽度并在其周围添加填充以确保它仍然占据屏幕的整个宽度。

我确定这是我犯的一些小错误，但我找不到。感谢您的帮助！

【问题讨论】：

标签： css html

【解决方案1】：

divs 就是这样工作的，它们是块级元素。如果您不希望它们占用整个容器元素，您可以float 它或使其成为inline-block

【讨论】：

我想我的问题是我正在尝试做一个简单的 div 来用 main_divs 做一个 div。它们首先显示为全宽（即使我尝试调整它们的大小），然后如果我尝试在 CSS 中将 float:left 添加到 .main_div ，它只会将顶部居中而不是彼此相邻浮动。有什么我想念的吗？
@MxmastaMills 顶部 div 的原因是因为您没有清除无序列表元素上的浮动，请参阅jsfiddle.net/BmM6t/2

【解决方案2】：

对.main_div 使用overflow: hidden;，这样您就可以看到它正在调整大小，但没有隐藏内容。

【讨论】：