Comment forcer un élément de mon DIV à occuper le plus d'espace horizontal possible?

J'ai un DIV avec deux éléments, que je veux sur le même plan horizontal (en supposant qu'il y ait assez d'écran). L'élément de gauche est une table et l'élément de droite est un élément d'affaissement à largeur fixe.Comment forcer un élément de mon DIV à occuper le plus d'espace horizontal possible?

<div id="content"> 

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

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

</div>

Comment puis-je l'élément gauche (la table) occupent tout l'espace inoccupé que le graphique circulaire de largeur fixe n'a pas pris? Je pensais que le réglage de la « width: 100% » attribut le ferait ...

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

mais le tableau est encore glisser en dessous du plan horizontal de la table - https://jsfiddle.net/t53agm0z/. Comment puis-je obtenir les deux sur la même ligne, mais plus important encore, faire en sorte que la table occupe autant d'espace horizontal que le DIV parent permet?

Source

2017-09-05 Dave

La tarte passe en dessous car la table prend 100% - voir la frontière de la table. Les champs à leur tour ne prennent pas tout l'espace dans la table. – deg

Je ne veux pas que la table prenne 100% de la ligne, je veux qu'elle prenne 100% de tout ce qui reste de la ligne après avoir pris en compte l'espace occupé par le graphique à secteurs. – Dave

supprimer display: inline-block; de #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%; 
    } 
}

utilisation requête de média pour contrôler la largeur. à> 1200px width: calc(100% - 750px); à < = 1200px, largeur de table réglée à 100%.

En outre, ajouter ce qui suit pour aligner e texte:

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

exemple: 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>

Source

2017-09-05 19:48:32

Hey même si je cours votre extrait, il ne fonctionne pas. Le camembert apparaît toujours sous la table. Je veux qu'ils apparaissent côte à côte et que la table occupe autant de largeur que possible. Idem pour ton violon, même quand je l'étends aussi loin que possible. – Dave

@Dave vous avez dit que vous voulez 100%, vérifiez celui mis à jour. –

Non, ce que j'ai dit était "Comment faire pour que l'élément de gauche (la table) occupe tout l'espace inoccupé que le camembert à largeur fixe n'a pas occupé?". Je veux que les deux éléments restent sur le même plan horizontal, si possible. – Dave

obtenu ce travail en utilisant div table comme suit:

Cocher cette 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>

Source

2017-09-05 19:40:37 corix010

Est-ce que cela fonctionne pour vous? Ca ne marche pas pour moi de l'appliquer au Fiddle que j'ai posté. – Dave

@Dave dès que je diminue la largeur du panneau gauche JSFiddle qui augmente le panneau de droite de sorte que les deux éléments à l'intérieur de la div pourrait à la fois s'adapter, cela semble fonctionner pour moi. – corix010

Il peut y avoir une certaine confusion sur ce que je veux. Je ne veux pas que la table occupe 100% de la rangée, je veux que la table et le camembert prennent 100% de la rangée. – Dave

-1

Utilisez

largeur: 100%

En outre, si vous avez une padding ou marge utilisez

remplissage: 0 auto;

marge: 0 auto;

Source

2017-09-05 19:47:59

Si je comprends bien ce que vous avez besoin, vous pouvez utiliser quelques Variantes: 1. Bloc d'emballage de carte de position absolue. par exemple.

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

exemple: https://jsfiddle.net/bxtmrd59/

Utilisez display: table-row, table-cell pour tableau et le graphique, comme

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

exemple: https://jsfiddle.net/temz10fp/1/

3 Utilisez flexbox, comme:

#content{ 
    display: flex; 
} 

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

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

exemple https://jsfiddle.net/j0ggskbv/1/

Source

2017-09-06 13:28:58 Vakiliy

Comment forcer un élément de mon DIV à occuper le plus d'espace horizontal possible?

Répondre

Questions connexes