html - 具有动态宽度的 CSS 3 div

Question

我会尽量用简短的语言来解释。

我有三个 div，我们称它们为 A、B 和 C。
我希望他们在同一条线上。
我想在 div B 中放置一个图像，但有一些限制，所以我希望 div B 具有最大宽度和最大高度限制。
然后，侧div，A和C应该互相填充剩余空间的一半。
我试过使用 display: table 但图像占用的空间会发生奇怪的事情。

有人知道该怎么办吗？

到目前为止的代码:

.table
{
    display: table;

    width: 729px;
    height: 343px;
}

.left
{
    display: table-cell;
    background-color: red;
}

.center
{
    display: table-cell;
    max-width: 429px;
    max-height: 343px;
    background-color: green;
}

.right
{
    display: table-cell;
    background-color: deepskyblue;
}

<div class="table">
    <div class="left"> a </div>

    <div class="center"> <img src="https://c1.staticflickr.com/9/8452/7936998300_6ab78565ff_m.jpg"> </div>

    <div class="right"> c </div>
</div>

fiddle :https://jsfiddle.net/vasndLt3/

如您所见，“绿色区域”比图片大。

预期:Image

注意高度随内容更新。

Answer 1

使用 flexbox 可以轻松实现.

.table {
  display: flex;
  flex-direction: row;
  width: 729px;
  height: 343px;
}

.left {
  flex: 1;
  background-color: red;
}

.center {
  max-width: 429px;
  max-height: 343px;
  background-color: green;
}


.right {
  flex: 1;
  background-color: deepskyblue;
}

<div class="table">
  <div class="left"> a </div>

  <div class="center"> <img src="https://c1.staticflickr.com/9/8452/7936998300_6ab78565ff_m.jpg"> </div>

  <div class="right"> c </div>
</div>