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>

小提琴：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>

CSS 3 div具有动态宽度

1 个答案: