私の画像は私たちの部門内にとどまるようにするには？

Question

私はブートストラップを使用していますが、div内に2つのイメージとulリストが含まれています。フルページでは、それらはすべてdiv（最初の画像）に収められますが、ページのサイズを変更すると画像とulリストはそれに応じて移動しますが、div内には含まれなくなります（下の2番目の画像）。私はこれをどのように変えることができるか知っていますか？

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の高さプロパティを削除、またはそれにoverflow: auto;を追加します。 あなたはすべての要素をしたい場合は横並びが＃社会ロゴ、COL-SM-3 COL-XS-12にfloat: left;を追加し、COL-SM-3 COL-XS-12

Answer 2

.moreがheight小道具が設定されていますあなたがモバイルに押しつぶすにつれてその子どもと一緒に拡大することはありません。それはどのように動作するのですか。デスクトップにheight : 300pxが本当に必要な場合は、height : autoと、潜在的にメディアクエリの一部として浮動小児を収容するための消去要素が必要です。

または、含める要素にdisplay:flexboxを使用してください。

Flexbox Guide