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

Dave 发表于 Dev

戴夫

我有一个包含两个元素的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允许的水平空间？

Dalin Huang

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

#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%;
  }
}

使用媒体查询来控制宽度。在> 1200pxwidth: calc(100% - 750px);处，在<= 1200px处，表格宽度设置为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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于 2020-11-9

我来说两句

0 条评论

登录后参与评论

上一篇：在Amazon Linux EC2实例上安装R软件包

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

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

IE 11中的FormData未定义

如何一次从多个文本框中获取值？

在 Python 2.7 中。如何从文件中读取特定文本并分配给变量

OpenCv：改变 putText() 的位置

Redux动作正常，但减速器无效

如何从JavaScript中的MP3文件读取元数据属性？

如何使用Redux-Toolkit重置Redux Store

将加号/减号添加到jQuery菜单

OpenGL纹理格式的颜色错误

获取并汇总所有关联的数据

超过时间限制错误C ++

ActiveModelSerializer仅显示关联的ID

在交互式Python Shell中获得最后结果

如何开始为Ubuntu开发

去噪自动编码器和常规自动编码器有什么区别？

Excel 2016图表将增长与4个参数进行比较

算术中的c ++常量类型转换

使用因子时如何在y轴上的ggplot中插入count或％

TreeMap中的自定义排序

如何在R中转置数据

在 React Native Expo 中使用 react-redux 更改另一个键的值