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

卸下浮子。将所有子代转换为downloadpath/sbt/bin，并在inline-block和子容器（white-space: nowrap）上设置.container。这样会将所有内容强制为一行，并使容器的宽度适合其子代。

.project

#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;
}

水平延伸无尽，孩子的宽度未知

1 个答案: