html - 如何强制 DIV 中的元素占用尽可能多的水平空间？

Question

我有一个包含两个元素的 DIV，我希望它们位于同一水平面上(假设有足够的屏幕空间)。左边的元素是一个表格，右边的元素是一个固定宽度的下垂元素。

<div id="content">

<table id="currencyTable">
...
</table>

<div id="pieChart">
<svg width="700" height="400">
    <g id="labels" />
</svg>
</div>

</div>

如何让左边的元素(表格)占据所有固定宽度饼图未占用的空间？我以为设置“width:100%”属性就可以了...

#currencyContent {
    display: block;
}

#currencyTable {
    display: inline-block;
    margin: 0 auto;
    background-color: #ffffff;
    border: 1px solid #C7CDD1;
    width: 100%;
}

#pieChart {
    display: inline-block;
    background-color: yellow;
    vertical-align: top;
}

但图表仍低于表格的水平面 -- https://jsfiddle.net/t53agm0z/ .我怎样才能让两者在同一行上，但更重要的是，让表格占据父 DIV 允许的尽可能多的水平空间？

Answer 1

如果我理解你需要什么，你可以使用一些变体: 1.绝对位置图表包装 block 。例如

// CSS
#content{
    position: relative;
    margin: 0;
}

#currencyTable {
  background-color: #ffffff;
  border: 1px solid #C7CDD1;
  display: block;
  margin-right: 100px; // 100px Fixed width of chart
}

#pieChart {
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    background-color: yellow;
}
// HTML
<div id="pieChart">
  <svg width="100" height="400"> // 100px Fixed width if chart
    <g id="labels" />
  </svg>
</div>

示例:https://jsfiddle.net/bxtmrd59/

1. 对表格和图表使用display: table-row, table-cell，例如

   #content{
       position: relative;
       display: table-row;
   }
   
   #currencyTable {
       background-color: #ffffff;
       border: 1px solid #C7CDD1;
       display: table-cell;
   }
   
   #pieChart {
       display: table-cell;
       background-color: yellow;
       vertical-align: top;
   }
   

示例:https://jsfiddle.net/temz10fp/1/

3 使用 flexbox，比如:

#content{
  display: flex;
}

#currencyTable {
    background-color: #ffffff;
    border: 1px solid #C7CDD1;
    display:  flex-grow: 1;
 }

#pieChart {
    background-color: yellow;
    vertical-align: top;
    width: 100px;
}

示例 https://jsfiddle.net/j0ggskbv/1/