如何让我的图像保持在我们的div中？

Question

我使用bootstrap，我有一个div中包含的两个图像和一个ul列表。在整页中，它们都包含在div中（下面的第一张图片），但是当我调整页面大小时，图像和ul列表会相应地移动，但它们不再包含在div中（下面的第二张图像）。有谁知道我怎么能改变这个？

HTML：

<div class="more">


  <div class="col-sm-3 col-xs-12" id="social-logo">
    <a href="#"><img src="" alt="" width="200" height="200"></a>
  </div>

  <div class="col-sm-3 col-xs-12" id="links">
    <ul class="about">
      <li class="a-links">
        <div id="about-links" class="site-content">
          <ul class="aboutli">
            <li><a target="_blank" href="#">About Us</a></li>
            <li><a target="_blank" href="#">FAQ's</a></li>
            <li><a target="_blank" href="#">Contact Us</a></li>
            <li><a target="_blank" href="#">Work With Us</a></li>
            <li><a target="_blank" href="#">Terms and Conditions</a></li>
            <li><a target="_blank" href="#">Privacy Policy</a></li>
          </ul>
        </div>
      </li>
    </ul>
  </div>

    <div class="col-sm-3 col-xs-12" id="drinkaware">
      <a href="https://drinkaware.co.uk"><img src="/Applications/MAMP/htdocs/D0.1/images/drinkawarered.png" width="200" height="auto"></a>
    </div>

  </div>

</div>

CSS：

.more {
  height: 300px;
  background-color: #e6e6e6;
  border-top: 1px solid #000000;
}
#social-logo {
  display: inline-block;

}
ul.about {
  width: 160px;
  height: 184px;
  display: inline-block;
  border: 1px solid #000000;
  list-style-type: none !important;
  list-style-position: inside;
  text-align: center;
  text-decoration: none;
  line-height: 0.8cm;
  padding: 0px;
}
ul.aboutli {
  color: #000000;
  font-size: 12px;
  border: 1px solid yellow;
  padding: 0px;
  text-decoration: none;
  list-style-type: none !important;
}
#drinkaware {
    display: inline-block;
}

Answer 1

只需移除.more的height属性，或向其添加overflow: auto;即可。 如果您希望并排所有元素，请将float: left;添加到#social-logo，col-sm-3 col-xs-12和col-sm-3 col-xs-12

Answer 2

.more有一个height道具套装，当你匆匆忙忙地移动时，它不会随着它的孩子而扩展。它是如何工作的。如果您在桌面上确实需要height : auto，则需要height : 300px和清除元素来容纳浮动子元素，可能作为媒体查询的一部分。

或者只在包含元素上使用display:flexbox。

Flexbox Guide