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

我有一个有两个元素的DIV，我想要在同一个水平面上（假设有足够的屏幕空间）。左边的元素是一个表格，右边的元素是固定宽度的下垂元素。如何强制我的DIV中的元素占用尽可能多的水平空间？

<div id="content"> 

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

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

</div>

如何让左元素（表格）占用固定宽度饼图未占用的所有空闲空间？我以为设置“宽度：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允许的水平空间一样多的空间？

来源

2017-09-05 Dave

馅饼低于因为该表以100％ - 见表格的边框。这些领域反过来并没有占据表中的所有空间。 – deg

我不”希望表拿100％的行，我希望它采取的100％，无论会计饼图占据的空间后留下的行。 – Dave

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

使用媒体查询来控制的宽度。 at> 1200px width: calc(100% - 750px); at < = 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>

来源

2017-09-05 19:48:32

嘿，即使我运行你的代码片段，它不工作。饼图总是出现在桌子下面。我希望它们彼此并排出现，并让桌子尽可能地占据宽度。即使我尽可能扩展它，也可以为你的小提琴提供帮助。 – Dave

@Dave你说你想100％，检查更新的一个。 –

不，我说的是“我如何让左元（表）占据所有未被占用的空间，固定宽度的饼图并未采取了？”。如果可能，我确实希望两个元素都保持在同一个水平面上。 – Dave

得到它的工作采用div表如下：

检查这个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>

来源

2017-09-05 19:40:37 corix010

这是否适合你？它不工作，我把它应用到我发布的小提琴。 – Dave

@戴夫只要我降低的jsfiddle的宽度左侧面板增加右侧面板，以便在div内的两个元素都可以适应，它似乎为我工作。 – corix010

对于我想要的可能会有些困惑。我不希望表格占用100％的行数，我希望表格和饼图占用100％的行数。 – Dave

-1

使用

宽度：100％

另外，如果您有任何填充或保证金，然后使用

padding：0 auto;

margin：0 auto;

来源

2017-09-05 19:47:59

如果我理解正确的，你需要什么，你可以使用一些变体： 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/

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

来源

2017-09-06 13:28:58 Vakiliy

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

回答

相关问题