0
Ich habe stundenlang, um dieses Problem zu jagen, hier ist der Code:3 Divs nebeneinander Überlauf einander
<!DOCTYPE html>
<html>
<head>
<style>
html, body{
height: 100%;
max-height: 100%;
overflow:hidden;
}
.controls{
display: table;
height: 10%;
margin-top: 1%;
width: 100%;
}
#w1 {
width:25%;
}
#can
float: left;
padding: 0;
margin: 0;
top: 0;
}
#canTwo{
float: left;
padding: 0;
margin: 0;
top: 0;
}
textarea {
outline: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
font-size: 1.25vw;
height: 100%;
width: 100%;
}
#w2{
width:50%;
}
#w3{
width:25%;
}
.controlbuttons {
display: table-cell;
height: 100%;
}
</style>
</head>
<body>
<div class="controls">
<div class="controlbuttons" id="w1"><canvas id = "can" width = "0" height = "0"></div>
<div class="controlbuttons" id="w2"><textarea rows="3" cols="50"></textarea></div>
<div class="controlbuttons" id="w3"><canvas id = "canTwo" width = "0" height = "0"></div>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
fitToContainer();
});
var canvas = document.getElementById("can"),
ctx = canvas.getContext('2d'),
canvasTwo = document.getElementById("canTwo"),
ctxTwo = canvasTwo.getContext('2d');
function fitToContainer(){
var control = document.getElementsByClassName("controlbuttons")[0];
var h = control.clientHeight;
var w = control.clientWidth;
canvas.height = h;
canvas.width = w;
canvasTwo.height = h;
canvasTwo.width = w;
ctx.fillStyle = "green";
ctx.fillRect(0, 0, 5000, 5000);
ctxTwo.fillStyle = "green";
ctxTwo.fillRect(0, 0, 5000, 5000);
}
</script>
</body>
</html>
jsfiddle: https://jsfiddle.net/ca3uw837/
Grundsätzlich ich ein Textfeld haben und seine Breite nimmt 50% der Seite und es ist genau in der Mitte, es gibt zwei Leinwände auf seiner Seite, die 25% Breite nehmen. Ich versuche, sie zu bekommen perfekt auszurichten (gleiche Höhe, genau eines neben dem anderen), aber hier ist, wie es auf meinem PC aussieht: 
Was soll ich tun? benutze flexbox? Ich bin nicht sicher, ob ich weiß, wie ich es erreichen kann, da Leinwände mit ihrer Dimensionierungstechnik sehr schwierig sind. Vielen Dank für Ihre Zeit.
, was die Höhe der Leinwand und dem Textbereich bestimmt? Der "Steuer" -Behälter? –