html - 无尽的水平拉伸(stretch)， child 的宽度未知

Question

我想做的是创建可以向右无限扩展的 div。这很简单，有几个 working示例。

但是，我很难适应:

<div id="container">
   <div class="item"></div>
   <div class="item"></div>
     ...
</div>

对于我正在使用的设计:

<div id="container">
  <div class="project">
    <div class = "textContainer">text Container 1.1 </div>
    <div class = "imgContainer">img Container 1.1 </div>
   ...
  </div>
  <div class="project">
    <div class = "textContainer">text Container 2.1 </div>
    <div class = "imgContainer">img Container 2.1 </div>
    <div class = "imgContainer">img Container 2.2 </div>
    <div class = "imgContainer">img Container 2.3 </div>
    ...
  </div>
</div>

其中 textContainer 和 imgContainer 是专门包含明显内容的类(重要说明:我希望 imgContainer 填充 100% 的高度并水平调整以保持宽高比)。

为了更好地了解我(几乎)工作的意图 fiddle .删除容器中的注释以查看所需的效果。

Answer 1

移除 float 。将所有子容器转换为 inline-block，并在 .container 和子容器(.project)上设置 white-space:nowrap )。这将强制所有内容都在一行中，并使容器的宽度适合他的 child 。

#container {
  height: calc(100vh - 100px);
  margin: 40px 0;
  white-space: nowrap;
}

.project {
  white-space: nowrap;
  background: blue;
}

.textContainer {
  width: 200px;
  background: red;
}

.project, .imgContainer, .textContainer {
  display: inline-block;
  height: 100%;
  vertical-align: top;
}

<div id="container">
  <div class="project">
    <div class="textContainer">text Container 1.1 </div>
    <div class="imgContainer">img Container 1.1 </div>
    <div class="imgContainer">img Container 1.2 </div>
    <div class="imgContainer">img Container 1.3 </div>
  </div>
  <div class="project">
    <div class="textContainer">text Container 2.1 </div>
    <div class="imgContainer"><img src="http://myhswm.org/images/sized/images/animals/anjo-256x256.jpg"></div>
    <div class="imgContainer">img Container 2.2 </div>
    <div class="imgContainer">img Container 2.3 </div>
    <div class="imgContainer">img Container 2.4 </div>
  </div>
</div>