html - 包装 div 不会为内部 div 重新调整大小

Question

试图做一个小部分来列出一些玩家的排名，但是包装器 div 不会扩展到内部 div

问题在 Chrome

问题在 Firefox

<span class="section-title pull-left">Welcome back <?php echo $displayName ?>!</span>
<div class="section">
    <div class="section-image">
        <img src="<?php echo $domain; ?>/images/logos/csgo-logo.png">
    </div>
    <ul class="section-list">
        <li>
            <div class="top">

            </div>
            <ul class="ranking-list">
                <li>Test</li>
                <li>Test</li>
                <li>Test</li>
                <li>Test</li>
                <li>Test</li>
            </ul>
        </li>
        <li>
            <div class="top">

            </div>
            <ul class="ranking-list">
                <li>Test</li>
                <li>Test</li>
                <li>Test</li>
                <li>Test</li>
                <li>Test</li>
            </ul>
        </li>
        <li>
            <div class="top">

            </div>
            <ul class="ranking-list">
                <li>Test</li>
                <li>Test</li>
                <li>Test</li>
                <li>Test</li>
                <li>Test</li>
            </ul>
        </li>
    </ul>
</div>

.section-title {display: block;font-weight: bold;font-family: 'Play', sans-serif;font-size: 14px;color: #656565;text-transform: uppercase;}
.section {width: 100%;height: auto;padding: 10px;margin-top: 20px;background-color: #EDEEF1;border-radius: 3px;border: 1px solid #fff;outline: 1px solid #EDEEF1;}
.section-image {display: inline-block;height: auto; width: auto;margin-top: 10px;position: relative;float: left;left: 0;}
.section-image img {height: 100;width: 100;}
.section-list {width: 93%;position: relative;float: right;right: 0;list-style-type: none;}
.section-list li {display: inline-block;width: 33%;height: auto;}
.section-list li .top {width: 100%;height: 35px;background-color: #212121;}
.section-list li .ranking-list {width: 100%;height: auto;list-style-type: armenian;}
.section-list li .ranking-list li {width: 100%;height: 15px;}

我可以解决 CS:GO 图像和三列的对齐问题，但我需要包装器来重新调整/扩展部分 div

Answer 1

发生这种情况是因为您正在使用 float，所以我为您制作了一个片段，您的代码更改了一些内容，其中删除了 float

片段

.section-title {
  display: block;
  font-weight: bold;
  font-family: 'Play', sans-serif;
  font-size: 14px;
  color: #656565;
  text-transform: uppercase;
}
.section {
  width: 100%;
  height: auto;
  padding: 10px;
  margin-top: 20px;
  background-color: #EDEEF1;
  border-radius: 3px;
  border: 1px solid #fff;
  outline: 1px solid #EDEEF1;
  font-size:0; /* fix inline-block gap */
}
.section-image {
  height: auto;
  width: 8.7%; /* to keep same size as auto had */
  display:inline-block;
  vertical-align:top;

}
.section-image img {
  width: 100%;
}
.section-list {
  width: calc(100% - 9.7%); /*100 minus 8.7 from img - 1 from margin left */
  list-style-type: none;
  display:inline-block;
  font-size:0; /* fix inline-block gap */
  padding:0;
  margin-left:1%
    
 
}
.section-list li {
  display: inline-block;
  width: 33%;
  height: auto;
  font-size:16px; /*whatever you want */
}
.section-list li .top {
  width: 100%;
  height: 35px;
  background-color: #212121;
}
.section-list li .ranking-list {
  width: 100%;
  height: auto;
  list-style-type: armenian;
}
.section-list li .ranking-list li {
  width: 100%;
  height: 15px;
}

<span class="section-title pull-left">Welcome back</span>
<div class="section">
  <div class="section-image">
    <img src="//lorempixel.com/100/100">
  </div>
  <ul class="section-list">
    <li>
      <div class="top">
      </div>
      <ul class="ranking-list">
        <li>Test</li>
        <li>Test</li>
        <li>Test</li>
        <li>Test</li>
        <li>Test</li>
      </ul>
    </li>
    <li>
      <div class="top">
      </div>
      <ul class="ranking-list">
        <li>Test</li>
        <li>Test</li>
        <li>Test</li>
        <li>Test</li>
        <li>Test</li>
      </ul>
    </li>
    <li>
      <div class="top">
      </div>
      <ul class="ranking-list">
        <li>Test</li>
        <li>Test</li>
        <li>Test</li>
        <li>Test</li>
        <li>Test</li>
      </ul>
    </li>
  </ul>
</div>