Question

我试图让我的div的宽度扩展到内容的px。 atm这就是我所拥有的：

<div class="col-sm-12">
<div class="GameItemsImage">
    <div class="test">
        <img src="~/img/cd-logo.svg" />
        <img src="~/img/cd-logo.svg" />
        <img src="~/img/cd-logo.svg" />
        <img src="~/img/cd-logo.svg" />
        <img src="~/img/cd-logo.svg" />
        <img src="~/img/cd-logo.svg" />
        <img src="~/img/cd-logo.svg" />
        <img src="~/img/cd-logo.svg" />
        <img src="~/img/cd-logo.svg" />
        <img src="~/img/cd-logo.svg" />
        <img src="~/img/cd-logo.svg" />
    </div>
</div>

.GameItemsImage {
    background-color: #3E454C;
    width: 100%;
    height: 150px;
    overflow-x: scroll
}

.test {
    width: 200%;
}

但这是静态的我希望它是动态的，所以当一个新项目被放入div时，它会自动消耗。我该怎么做？

Answer 1

.GameItemsImage {
  background-color: #3E454C;
  width: 100%;                /* (no need to add/set height) */
  overflow-x: scroll
}

.test {
  white-space: nowrap;       /* extend horizontally inline/inline-block elements */
  font-size: 0;              /* removes the 4px inline spacing */
}

/* you use images, but for textual children elements you'd want to reset font-size:1rem; */

<div class="GameItemsImage">
  <div class="test">
    <img src="//placehold.it/300x100/cf5" />
    <img src="//placehold.it/300x100/fc5" />
    <img src="//placehold.it/300x100/5fc" />
    <img src="//placehold.it/300x100/c5f" />
    <img src="//placehold.it/300x100/f5c" />
    <img src="//placehold.it/300x100/5cf" />
  </div>
</div>

div的设置宽度取决于图像的x宽度

1 个答案: