Question

我一直在追逐这个问题几个小时，这里是代码：

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

基本上我有一个textarea，它的宽度占页面的50％，它正好在中间，有两个画布的宽度为25％的画布。我试图让它们完美对齐（相同的高度，正好一个旁边），但这是它在我的电脑上的样子：

我该怎么办？使用flexbox？我不确定我是否知道如何实现它，因为画布对于它们的尺寸调整技术非常棘手。非常感谢你的时间。

Answer 1

将flexbox应用于.controls以对齐子元素。同时将box-sizing: border-box应用于textbox，因为默认填充会添加文本框的100％高度。 border-box将填充包含高度。

＆＃13;

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

＆＃13;

html,
body {
  height: 100%;
  max-height: 100%;
  overflow: hidden;
}

.controls {
  display: flex;
  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%;
  box-sizing: border-box;
}
#w2 {
  width: 50%;
}
#w3 {
  width: 25%;
}
.controlbuttons {
  height: 100%;
}

＆＃13;

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

＆＃13;

Answer 2

要将table-cell项与顶部对齐，您应该使用：vertical-align: top。这两个canvas都缺少height和width属性，请将它们设置为100%。将box-sizing: border-box添加到textarea：

<强> box-sizing: border-box

宽度和高度属性（以及最小/最大属性）包括内容，填充和边框，但不是边距

所以：

textarea {
  /** ... rest of styles ...*/
  margin: 0;
  box-sizing: border-box;
  float: left;
}
.controlbuttons { vertical-align: top; } /* Align items to the top */
.controlbuttons canvas { height: 100%; width: 100%; }

演示：（在firefox 53.0.2＆amp; Chrome 56.0.2924.87中测试）

＆＃13;

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

＆＃13;

html,
body {
  height: 100%;
  max-height: 100%;
  overflow: hidden;
}

.controls {
  display: table;
  height: 10%;
  margin-top: 1%;
  width: 100%;
}

#w1 {
  width: 25%;
}

textarea {
  outline: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  font-size: 1.25vw;
  height: 100%;
  width: 100%;
  margin: 0;
  box-sizing: border-box;
  float: left;
}
#w2 {
  width: 50%;
}
#w3 {
  width: 25%;
}
.controlbuttons {
  display: table-cell;
  height: 100%;
  vertical-align: top;
  
}
.controlbuttons canvas {
  float: left;
  padding: 0;
  margin: 0;
  top: 0;
  height: 100%; 
  width: 100%;
}

＆＃13;

<!DOCTYPE html>
<html>


<body>


  <div class="controls">
    <div class="controlbuttons" id="w1">
      <canvas id="can" width="0" height="0"></canvas>
    </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"></canvas>   
    </div>
  </div>

</body>
</html>

＆＃13;

3个Div并排相互溢出

2 个答案: