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

Question

快速 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 的宽度时，它会更改宽度，但如果您检查元素，它只会更改对象的宽度并在其周围添加填充以确保它仍然占据屏幕的整个宽度。

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

Answer 1

这就是divs 的工作方式，它们是块级元素。如果您不希望它们占用其容器元素的全部内容，您可以float使用它或制作它inline-block

Answer 2

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