3 Div的一侧彼此

我一直在追着解决这个问题了几个小时，这里是代码：3 Div的一侧彼此

<!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？我不确定我是否知道如何实现它，因为画布的尺寸确定技巧非常棘手。非常感谢您的参与。

来源

2017-05-14 RunningFromShia

什么决定了画布和文本区域的高度？ 'controls'容器？ –

要对齐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 &的Chrome 56.0.2924.87）

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

 

 
}

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

<!DOCTYPE html> 
 
<html> 
 

 

 
<body> 
 

 

 
    <div class="controls"> 
 
    <div class="controlbuttons" id="w1"> 
 
     <canvas id="can" width="0" height="0"></canvas> 
 
    </div> 
 
\t <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>

来源

2017-05-14 15:48:33

你能详细说明问题是什么以及解决方法是什么？ – RunningFromShia

@RunningFromShia更新了我的答案。 –

应用flexbox到.controls对齐子元素。也适用于box-sizing: border-box作为textbox默认填充与文本框的100％的高度增加。 border-box将使填充包含高度。

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

 

 
}

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

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

来源

2017-05-14 15:57:38

您能否详细说明问题是什么以及解决方法是什么？ – RunningFromShia

默认情况下，文本框具有填充，使其有效大小大于100％;设置边框确保填充被限制到100％：使用柔性盒来对齐项目。我删除了表格属性，因为表格不应该用于除表格数据之外的其他任何东西，特别是不适用于样式和定位 –

3 Div的一侧彼此

回答

相关问题