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的一側彼此

回答

相關問題