在几个'内联'div中显示'block'div

Question

下面的图片可以更好地理解我的问题。

我有几个div元素（div A），它们的大小取决于它们的内容。 它们显示在一个较大容器中的块内，其中max-with defined（没有名称的大外部矩形）。 一切正常，直到我有内部div另外两个div（B和C），我看起来像图像。

我没有成功。我已经尝试了几种css属性的组合，如显示，边距，填充，浮动......负边距......表格......

欢迎任何帮助。

---

更新

代码如下所示：

HTML

 <div style="max-width: 800px;">
    <div class="div_a">
      <div class="div_b">
        short text
      </div>
      <div class="div_c">
        short text
      </div>
    </div>

    <div class="div_a">
      <div class="div_b">
        looooong text
      </div>
      <div class="div_c">
        looooong text
      </div>
    </div>

    <div class="div_a">
      <div class="div_b">
        huuuuuge text
      </div>
      <div class="div_c">
        huuuuuge text
      </div>
    </div>
</div>

CSS

.div_a{
  display: inline;
}

.div_b{
  display: block; /* doesn't work*/
}

.div_c{
  display: block; /* doesn't work*/
}

Answer 1

如果我理解正确，应该这样做：

.div_a{
  display: inline-block;
}

：）

...假设除了边框和间距属性之外没有其他样式。

A fiddle example here