Question

我有一个宽度为900px的包装div。在那里我有两个宽度为400px和500px的div。我无法弄清楚为什么这些div不会占用至少900px的包装器。

   .wrapper{
   background:blue;
   width:900px;
   height:250px;
   }

   .div1{
   background:yellow;
   height:250px;
   width:400px;
   float:left;
   }

   .div2{
   background:orange;
   height:250px;
   width: 500px;
   }

   .div2 li {
   display: list-item;
   list-style-type: none;
   }


   <div class="wrapper">
   <div class="div1"><img src="https://lh6.googleusercontent.com/-gMmeweshbOo/Up307AA-         1hI/AAAAAAAAAGE/cU_E9cGjWks/w400-h300-no/google_trans.png"></div>
   <div class="div2">
   <h2>Important Documents<h2>

   <ul>
   <li><a href="" target="_blank">Link1</a></li>

   <li><a href="" target="_blank">Link2</a></li>

   <li><a href="" target="_blank">Link3</a></li>

   <li><a href="" target="_blank">Link4</a></li>

   <li><a href="" target="_blank">Link5</a></li>
   </ul>


   </div>
   </div>

http://codepen.io/anon/pen/swbpC

Answer 1

试试这个：

  .div2
   {
      background:orange;
      height:250px;
      width: 500px;
      float:left;
   }

将float:left添加到div2

Answer 2

.div2{
background:orange;
height:250px;
width: 500px;
float:left; //HERE!!
}

Answer 3

您需要将overflow:auto;添加到.div2，以便其内容不会溢出容器。

Answer 4

当我测试你的代码时，两个div都具有正确的宽度。但是，div2元素被推到div1元素下面。 div2缺少float：right属性。我相信这是你想要做的。

为什么div不占用指定的空间？

4 个答案: