为什么我的容器中的第二个div没有显示？

Question

我正在使用另一个线程上找到的代码创建彼此相邻的两个div。问题是第一个div应该有一个固定的值，第二个div应该只填充其余的，但是当我试图给它一个百分比时，它似乎只是删除了第二个div：

＆＃13;

＆＃13;

     #wrapper {
         width: 100%;
         overflow: auto; /* so the size of the wrapper is alway the size of the longest content */
         height: 150px;
         margin-bottom: 10px;
         overflow-y:hidden;
     	overflow-x:hidden;
     	border-radius: 10px;
     	background-color: #f1f2f4;
     }
     #first {
         float: left;
         width: 150px;
         height:150px;
     }
     #second {
     	width:100%;
     	height:150px;
         float:left;
    	padding: 1.5em;
     }

＆＃13;

    <div id="wrapper">
        <div id="first">Stack Overflow is for professional and enthusiast programmers, people who write code because they love it.</div>
        <div id="second">When you post a new question, other users will almost immediately see it and try to provide good answers. This often happens in a matter of minutes, so be sure to check back frequently when your question is still new for the best response.</div>
    </div>

＆＃13;

＆＃13;

＆＃13;

图像：

Answer 1

为什么会出现问题：

你有#second { width:100%; }。这意味着两个元素不会彼此相邻，因为第二个元素将需要容器的整个宽度。但是第一个元素已经占据了所有的高度，你有overflow: hidden;所以第二个元素从容器中出来（下面）并且根本不可见。只是看看它去了哪里你可以稍微降低第一项的高度（比如150px到120px）。

---

使用flex-box代替浮点数可以非常轻松直观地实现布局。所有现代浏览器现在都支持它。

＆＃13;

＆＃13;

#wrapper {
    width: 100%;
    margin-bottom: 10px;
    overflow:hidden;
    border-radius: 10px;
    background-color: #f1f2f4;
    display: flex;
}
#first {
    width: 150px;
    height:150px;
    flex-grow: 0;
    flex-shrink: 0;
}
#second {
  width:100%;
  height:150px;
  padding: 1.5em;
}

＆＃13;

<div id="wrapper">
    <div id="first">
        Lorem ipsum whatever I'm writting in here.
    </div>
    <div id="second">
        Lorem ipsum whatever I'm writting in here.
        Lorem ipsum whatever I'm writting in here.
        Lorem ipsum whatever I'm writting in here.
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以设置width:100%和float，100%无法将div放在前一个旁边。

• 你可以删除第二个浮动和宽度，但也许你不能很好地处理填充：

＆＃13;

＆＃13;

#wrapper {
  width: 100%;
  overflow: auto;
  /* so the size of the wrapper is alway the size of the longest content */
  height: 150px;
  margin-bottom: 10px;
  overflow-y: hidden;
  overflow-x: hidden;
  border-radius: 10px;
  background-color: #f1f2f4;
}
#first {
  float: left;
  width: 150px;
  height: 150px;
}
#second {
  height: 150px;
  padding: 1.5em;
}

＆＃13;

<div id="wrapper">
  <div id="first">Stack Overflow is for professional and enthusiast programmers, people who write code because they love it.</div>
  <div id="second">When you post a new question, other users will almost immediately see it and try to provide good answers. This often happens in a matter of minutes, so be sure to check back frequently when your question is still new for the best response.</div>
</div>

＆＃13;

＆＃13;

＆＃13;

• 或使用calc和box-sizing来确定width：

＆＃13;

＆＃13;

#wrapper {
  width: 100%;
  overflow: auto;
  /* so the size of the wrapper is alway the size of the longest content */
  height: 150px;
  margin-bottom: 10px;
  overflow-y: hidden;
  overflow-x: hidden;
  border-radius: 10px;
  background-color: #f1f2f4;
}
#first {
  float: left;
  width: 150px;
  height: 150px;
}
#second {
  box-sizing:border-box;
  float:left;
  width:calc(100% - 150px);
  height: 150px;
  padding: 1.5em;
}

＆＃13;

<div id="wrapper">
  <div id="first">Stack Overflow is for professional and enthusiast programmers, people who write code because they love it.</div>
  <div id="second">When you post a new question, other users will almost immediately see it and try to provide good answers. This often happens in a matter of minutes, so be sure to check back frequently when your question is still new for the best response.</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您的#wrapper元素具有固定的高度。 #second元素位于底部。

Answer 4

从而＃34;秒＃34;跨越它包裹到下一行的整个宽度并被隐藏，因为容器具有固定的高度。只需从＆＃34;秒＃34中删除width和float属性;格。

Answer 5

我只是在写这个答案，以使人们避免像我一样，因为一个愚蠢的错误而浪费时间在调试上。我在网站中放置在“导航栏div”旁边的任何div都在导航栏之前，而不是在导航栏旁边。当我删除“位置：固定”；在我的导航栏中运行得非常好。我的代码通常会出现问题，有时我会在我的导航栏中执行此操作：

 .anyclass
{
        position : fixed;
}