如何在具有随机宽度的div的右侧站点上放置div？

Question

我有一个具有可变宽度和可变高度的div＃1。现在我想在＃1的右侧站点旁边放置一个固定宽度和高度的div＃2。

这两个div应该在另一个div中，宽度为100％，因为我想重复这两个div。

这是一张图片（白色：div＃1，黑色：div＃2）：

我该怎么做？

我玩浮动

Answer 1

对行使用flexbox。我将白框的宽度设置为内联CSS，因为我认为它将以某种方式在您的代码中进行计算。

.container {
  background: lightgreen;
  padding: 3em;
}

.row {
  display: flex;
  height: 4em;
}

.row:not(:last-child) {
  margin-bottom: 1em;
}

.flexible {
  background: white;
}

.fixed {
  background: black;
  width: 1em;
}

<div class="container">
  <div class="row">
    <div class="flexible" style="width:150px"></div>
    <div class="fixed"></div>
  </div>
  <div class="row">
    <div class="flexible" style="width:500px"></div>
    <div class="fixed"></div>
  </div>
  <div class="row">
    <div class="flexible" style="width:50px"></div>
    <div class="fixed"></div>
  </div>
</div>

Answer 2

使用flex。

.container {
  display: flex;
}
.secondDiv {
  width: 200px;
}

Answer 3

您可以使用此示例：

.container{
    width: 100%;
}
.div1{
    width: <div1 width>;
    height: <div1 height>;
    float: left;
    background-color: white;
}
.div2{
    float: left;
    width: <div2 width>;
    height: <div1 height>;
    background-color: black;
}

你应该把这两个div（div1和div2）分组到另一个div中，在de container中有100％宽度：

<div id="container" class="container">
    <div id="block1" style="float: left; width: 100%">
         <div id="div1" class="div1">
         </div>  
         <div id="div2" class="div2">
         </div>
    </div>
    ...
</div>