Question

尝试制作一个小部分列出一些玩家排名，但包装div不会扩展内部div

中的问题

<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

这种情况正在发生，因为您正在使用$ cd ~/Downloads/stampit-2.1.0/test $ qunit -c init.js -t init.js Testing /Users/thad/Downloads/stampit-2.1.0/test/init.js ... { [Error: /Users/thad/Downloads/stampit-2.1.0/test/init.js:1 (function (exports, require, module, __filename, __dirname) { import stampit f ^^^^^^ Unexpected reserved word] message: '/Users/thad/Downloads/stampit-2.1.0/test/init.js:1\n(function (exports, require, module, __filename, __dirname) { import stampit f\n ^^^^^^\nUnexpected reserved word' }，所以我为您编写了一段代码，其中的代码更改了其中的一些内容，删除了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;
}

包装div不会重新调整内部div

1 个答案: