Ploty Achsenposition mit CSS

Question

Ich habe drei Achsen und ich versuche, ihre Position mit CSS anzupassen, aber es funktioniert nicht, wie Sie in der JSfiddle sehen können.

Ich möchte die ersten beiden Achsen auf der linken und die dritte auf der rechten Seite. Wenn es mir möglich ist, möchte ich die dritte mit einer größeren Höhe, aber einer kleineren Breite. Wie kann ich es einstellen?

Hier ist der Code (https://jsfiddle.net/3usfa3ad/):

HTML

<div id="XAxis" class="left" ></div> 
<div id="YAxis" class="left" ></div> 
<div id="XYAxis" class="right" ></div> 

CSS

div form p.left { 
    float: left; 
    clear: both; 
} 
div form p.right { 
    float: right; 
    clear: both; 
} 

JavaScript

var d3 = Plotly.d3; 
var gd3 = d3.select("div[id='XAxis']"); 
var my_XAxis = gd3.node(); 
gd3 = d3.select("div[id='YAxis']"); 
var my_YAxis = gd3.node(); 
gd3 = d3.select("div[id='XYAxis']"); 
var my_XYAxis = gd3.node(); 

var layout = { 
    xaxis: { 
     range : [0, 1] 
    }, 
    yaxis: { 
     range : [0, 1] 
    }, 
    margin: {t: 20}, 
    hovermode: 'closest', 
} 

Plotly.newPlot(my_XAxis, [], layout); 
Plotly.newPlot(my_YAxis, [], layout); 
Plotly.newPlot(my_XYAxis, [], layout); 

Answer 1

Ihre CSS scheint seltsam. Versuchen Sie, es zu:

div.left { 
    float: left; 
    clear: both; 
} 
div.right { 
    float: right; 
    clear: both; 
} 

Wenn Sie den folgenden Block ändern

gd3 = d3.select("div[id='XYAxis']") 
    .style({ 
    width: 0.5 * WIDTH_IN_PERCENT_OF_PARENT + '%', 
    height: 1.5 * HEIGHT_IN_PERCENT_OF_PARENT + 'vh', 
}); 

Sie die gewünschten Größenänderungen für das dritte Element erhalten soll.