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/

基本的に私は1つのテキストエリアを持っており、それは幅だ取りますページの50％で、真ん中にあるので、幅が25％の側面に2つのキャンバスがあります。私は彼らが完全に（同じ高さ、その他の隣に正確に一つ）を揃えるために取得しようとしているが、ここでは、それは私のPC上でどのように見えるかあるのです：

私は何をすることが出来るのですか？フレックスボックスを使用しますか？私はキャンバスがサイジング技術で非常に扱いにくいので、どのように達成するのか分かりません。あなたのお時間をありがとうございました。

出典

2017-05-14 RunningFromShia

？ 'controls'コンテナ？ –

table-cellの項目を先頭に配置するには、vertical-align: topを使用してください。 canvasにはいずれもheightとというプロパティがありません。100%に設定してください。だから、マージン

幅と高さのプロパティ

box-sizing: border-box

（および最小/最大プロパティ）内容、パディングとボーダーを含むが、ありません：テキストエリアに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 &クロム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が私の答えを更新しました。 –

は、子要素を整列させる.controlsにflexboxを適用します。 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％より大きくなりました。 border-boxを設定すると、パディングが100％に制限されていることが確認されます。フレックスボックスを使用して項目を揃えました。私はテーブルのプロパティを削除しました。テーブルのデータ以外には使用しないでください。特にスタイリングとポジショニングには使用しないでください。 –

答えて

関連する問題