私のDIV内の要素ができるだけ多くの水平スペースを占めるようにするにはどうしたらいいですか？

私はそれに2つの要素を持つDIVを持っています。これは、同じ水平面に（画面の不動産が十分にあると仮定して）必要です。左の要素はテーブルであり、右の要素は固定幅のサグ要素です。私のDIV内の要素ができるだけ多くの水平スペースを占めるようにするにはどうしたらいいですか？

<div id="content"> 

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

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

</div>

どのように私は左の要素（テーブル）は、固定幅の円グラフは取り上げていないことを、すべての空きスペースを占有するのですか？

#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/：私は「100％の幅」を設定すると思いました。どのようにして同じ行に両方を置くことができますか、より重要なのは、親DIVが許す限り、テーブルが水平方向のスペースを占めるようにすることです。

このJSFiddleをチェックしてください：

出典

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

使用メディアクエリを。 > 1200ピクセルでwidth: calc(100% - 750px);、< = 1200ピクセル、テーブル幅を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-テーブルを使用して作業しました。

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

@Dave JSFiddleの左側のパネルの幅を小さくするとすぐに右側のパネルが増え、div内の2つの要素が合うようになります。それは私にとってはうまくいくようです。 – corix010

これは、私が欲しいものについていくらか混乱するかもしれません。私はテーブルが行の100％を占めることを望んでいない、私はテーブルと円グラフが行の100％を占めるようにしたい。 – Dave

-1

使用

幅：また100％

、あなたが任意のパディングやマージンを持っているならば、使用

パディング：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/temz10fp/1/

3：https://jsfiddle.net/bxtmrd59/

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

例のように、表とグラフの使用display: table-row, table-cell

#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内の要素ができるだけ多くの水平スペースを占めるようにするにはどうしたらいいですか？

答えて

関連する問題