我如何强制 DIV 中的元素占据尽可能多的水平 space？

Question

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

<div id="content">

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

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

</div>

如何让左边的元素（table）占满固定宽度饼图未占满的space？我以为设置 "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;
}

但图表仍在 table - https://jsfiddle.net/t53agm0z/ 的水平面下方滑动。我怎样才能让两者在同一条线上，但更重要的是，让 table 占据尽可能多的水平 space 作为父 DIV 允许？

Answer 1

使用 div-table 如下：

检查此 JSFiddle。

CSS:

    .div-table{display:table; border:1px solid #003399;}
    .div-table-row{display:table-row;}
    .div-table-col{display:table-cell; padding: 5px; border: 1px solid #003399;}
    * {-moz-box-sizing: border-box;}

    #currencyTable {
        display: inline-block;
        margin: 0 auto;
        width: 100%;
    }

    #pieChart {
        display: inline-block;
        float: right;
        vertical-align: top;
        width: 100px;
        height: 100px;
    }

HTML:

  <div id = "content" class="div-table" style="width:100%">
    <div class="div-table-row">
      <div class="div-table-col">
        <table id="currencyTable">
            <tr>
                <th>Currency</th>
                <th>Price</th>
                <th>1d Change</th>
                <th>1w Change</th>
                <th>1y Change</th>
                <th>% Index Market Cap</th>
            </tr>
            <tr class="even currency-row">
                <td>Bitcoin</td>
                <td>2731.8 USD</td>
                <td><div class="arrow-down"></div>  -1513.8 </td>
                <td><div class="arrow-down"></div>  -1834.19 </td>
                <td>n/a</td>
                <td>53.79 %</td>
            </tr>
        </table>
      </div>
      <div id="pieChart" class="div-table-col">
        Your piechart
      </div>
    </div>
  </div>

Answer 2

使用

width: 100%

此外，如果您有任何填充或边距，请使用

padding: 0 auto;

margin: 0 auto;

Answer 3

从 #currencyTable 中删除 display: inline-block;:

#content {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

#currencyTable {
  margin: 0 auto;
  background-color: #ffffff;
  border: 1px solid #C7CDD1;
  width: calc(100% - 700px);
  box-sizing: border-box;
}

@media (max-width: 1200px) {
  #currencyTable {
    width: 100%;
  }
}

使用媒体查询来控制宽度。在 >1200 像素 width: calc(100% - 750px); 在 <= 1200 像素，table 宽度设置为 100%。

此外，添加以下内容以对齐文本：

#currencyTable tr th {
  text-align: left;
}

示例：https://jsfiddle.net/dalinhuang/jzy0hjzg/

var svg = d3.select("svg"),
  width = +svg.attr("width"),
  height = +svg.attr("height"),
  radius = Math.min(width, height) / 2,
  g = svg.append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

var labels = d3.select("#labels");

var color = d3.scaleOrdinal(["#98abc5",
  "#8a89a6",
  "#7b6888",
  "#6b486b",
  "#a05d56",
  "#d0743c",
  "#ff8c00",
  "#e34d01",
  "#ccff05",
  "#3e7eca",
  "#aa0092",
  "#b32e4f"
]);

var pie = d3.pie()
  .sort(null)
  .value(function(d) {
    return d.market_cap;
  });

var path = d3.arc()
  .outerRadius(radius - 10)
  .innerRadius(0);

var label = d3.arc()
  .outerRadius(radius - 40)
  .innerRadius(radius - 40);

var csvData = "currency,market_cap\n";
csvData += "Ethereum,29414864581\n";
csvData += "Ripple,8134952806\n";
csvData += "Bitcoin Cash,8985112165\n";
csvData += "Litecoin,3711925522\n";
csvData += "NEM,2574666000\n";
csvData += "Dash,2450463008\n";
csvData += "IOTA,1795131838\n";
csvData += "Ethereum Classic,1563577380\n";
csvData += "NEO,1134820000\n";
csvData += "Monero,1762581233\n";
csvData += "Stratis,593527604\n";
csvData += "Bitcoin,72310587213\n";
var data = d3.csvParse(csvData);
data.forEach(function(d) {
  d.market_cap = +d.market_cap;
  return d;
});

var arc = g.selectAll(".arc")
  .data(pie(data))
  .enter().append("g")
  .attr("class", "arc");

arc.append("path")
  .attr("d", path)
  .attr("fill", function(d) {
    return color(d.data.currency);
  });

arc.append("text")
  .attr("transform", function(d) {
    return "translate(" + label.centroid(d) + ")";
  })
  .attr("dy", "0.35em")
  .text(function(d) {
    return d.data.currency;
  });

// Now we'll draw our label lines, etc.
enteringLabels = labels.selectAll(".label").data(data).enter();
labelGroups = enteringLabels.append("g").attr("class", "label");
labelGroups.append("circle").attr({
  x: 0,
  y: 0,
  r: 2,
  fill: "#000",
  transform: function(d, i) {
    centroid = pied_arc.centroid(d);
    return "translate(" + pied_arc.centroid(d) + ")";
  },
  'class': "label-circle"
});

body {
  margin: 0;
}

#content {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

#currencyTable {
  margin: 0 auto;
  background-color: #ffffff;
  border: 1px solid #C7CDD1;
  width: calc(100% - 700px);
  box-sizing: border-box;
}

@media (max-width: 1200px) {
  #currencyTable {
    width: 100%;
  }
}

#currencyTable tr th {
  text-align: left;
}

.currency-row img,
.currency-row .name {
  vertical-align: middle;
}

.currency-row {
  min-height: 30px;
  border-bottom: 1px solid #C7CDD1;
}

.currency-row img,
.currency-row .name {
  vertical-align: middle;
}

.currency-row td {
  padding: 12px 0 12px 0;
}

.currency-row td:first-child {
  padding-left: 10px;
}

.currency-row td:last-child {
  padding-right: 10px;
}

.currency-icon img {
  padding: 0 10px 0 10px;
}

.currency-title {
  white-space: nowrap;
}

.arrow-up {
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid black;
  vertical-align: middle;
  display: inline-block;
}

.arrow-down {
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #f00;
  vertical-align: middle;
  display: inline-block;
}

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

.arc text {
  font: 10px sans-serif;
  text-anchor: middle;
}

.arc path {
  stroke: #fff;
}

<script src="https://d3js.org/d3.v4.min.js"></script>
<div id="content">

  <table id="currencyTable" width="100%">
    <tr>
      <th>Currency</th>
      <th>Price</th>
      <th>1d Change</th>
      <th>1w Change</th>
      <th>1y Change</th>
      <th>% Index Market Cap</th>
    </tr>
    <tr class="even currency-row">
      <td>Bitcoin</td>
      <td>2731.8 USD</td>
      <td>
        <div class="arrow-down"></div> -1513.8 </td>
      <td>
        <div class="arrow-down"></div> -1834.19 </td>
      <td>n/a</td>
      <td>53.79 %</td>
    </tr>
    <tr class="odd currency-row">
      <td>Ethereum</td>
      <td>296.55 USD</td>
      <td>
        <div class="arrow-down"></div> -4.34 </td>
      <td>
        <div class="arrow-down"></div> -70.49 </td>
      <td>n/a</td>
      <td>21.88 %</td>
    </tr>
    <tr class="even currency-row">
      <td>Monero</td>
      <td>46.78 USD</td>
      <td>
        <div class="arrow-down"></div> -61.21 </td>
      <td>
        <div class="arrow-down"></div> -86.95 </td>
      <td>n/a</td>
      <td>1.31 %</td>
    </tr>
    <tr class="odd currency-row">
      <td>Stratis</td>
      <td>5.83 USD</td>
      <td>
        <div class="arrow-up"></div> + 0.04 </td>
      <td>
        <div class="arrow-down"></div> -1.05 </td>
      <td>n/a</td>
      <td>0.44 %</td>
    </tr>
    <tr class="even currency-row">
      <td>Ethereum Classic</td>
      <td>13.66 USD</td>
      <td>
        <div class="arrow-down"></div> -2.54 </td>
      <td>
        <div class="arrow-down"></div> -2.14 </td>
      <td>n/a</td>
      <td>1.16 %</td>
    </tr>
    <tr class="odd currency-row">
      <td>NEM</td>
      <td>0.25 USD</td>
      <td>
        <div class="arrow-down"></div> -0.02 </td>
      <td>
        <div class="arrow-down"></div> -0.04 </td>
      <td>n/a</td>
      <td>1.92 %</td>
    </tr>
    <tr class="even currency-row">
      <td>NEO</td>
      <td>17.09 USD</td>
      <td>
        <div class="arrow-up"></div> + 6.39 </td>
      <td>
        <div class="arrow-up"></div> + 0.18 </td>
      <td>n/a</td>
      <td>0.84 %</td>
    </tr>
    <tr class="odd currency-row">
      <td>Bitcoin Cash</td>
      <td>591.32 USD</td>
      <td>
        <div class="arrow-up"></div> + 64.16 </td>
      <td>
        <div class="arrow-up"></div> + 30.21 </td>
      <td>n/a</td>
      <td>6.68 %</td>
    </tr>
    <tr class="even currency-row">
      <td>Ripple</td>
      <td>0.09 USD</td>
      <td>
        <div class="arrow-up"></div> + 0.01 </td>
      <td>
        <div class="arrow-up"></div> + 0.01 </td>
      <td>n/a</td>
      <td>6.05 %</td>
    </tr>
    <tr class="odd currency-row">
      <td>Litecoin</td>
      <td>65.41 USD</td>
      <td>
        <div class="arrow-down"></div> -0.48 </td>
      <td>
        <div class="arrow-up"></div> + 2.82 </td>
      <td>n/a</td>
      <td>2.76 %</td>
    </tr>
    <tr class="even currency-row">
      <td>Dash</td>
      <td>370.17 USD</td>
      <td>
        <div class="arrow-up"></div> + 55.46 </td>
      <td>
        <div class="arrow-up"></div> + 8.79 </td>
      <td>n/a</td>
      <td>1.82 %</td>
    </tr>
    <tr class="odd currency-row">
      <td>IOTA</td>
      <td>0.51 USD</td>
      <td>
        <div class="arrow-down"></div> -0.16 </td>
      <td>
        <div class="arrow-down"></div> -0.32 </td>
      <td>n/a</td>
      <td>1.34 %</td>
    </tr>
  </table>


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

</div>

Answer 4

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

// 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/

对 table 和图表使用 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/

我如何强制 DIV 中的元素占据尽可能多的水平 space？

How do I force an element in my DIV to take up as much horizontal space as possible?

html

css

width

css-tables