こんにちはチーム、ポジショニングのdiv
は基本的に、私が並んでラインアップし、その横1（以下の例）と同じ高さに取るようにdivを得ることで非常に良好ではないです。
誰もがこれをコーディングで私を助けることができる場合、私は疑問に思いました。私はエリアBとCを自分のdivに配置し、うまく反応していますが、写真のエリアAに合わせる問題があります。これは、将来画面の解像度を移動するときに問題になります。
私は現在、この成果を達成するためにHTMLとCSSを使用しています。さらに、これらの領域には、接続されているギャップがありません。
よろしく、
ラウラ
それは、もう少し高度なのですが、あなたはCSSグリッドレイアウトを使用してそれを行うことができます。これは、各エリアにクラスがあると仮定したCSSです。
.container {
display: grid;
grid-template-columns: 1fr 3fr; /* right col 3* larger than left col */
grid-template-rows: auto;
grid-template-areas:
"area-b area-a"
"area-c area-a";
}
.area-a {
grid-area: area-a;
}
.area-b {
grid-area: area-b;
}
.area-c {
grid-area: area-c;
}
の互換性はかなり良いです：以下http://caniuse.com/css-grid/embed
最も簡単な方法かもしれません：
* {
box-sizing: border-box;
}
body {
overflow: hidden;
}
.area {
position: absolute;
}
.a {
top: 0;
right: 0;
width: 75vw;
height: 100vh;
background: red;
}
.b {
top: 0;
left: 0;
width: 25vw;
height: 50vh;
background: green;
}
.c {
bottom: 0;
left: 0;
width: 25vw;
height: 50vh;
background: blue;
}<div class="area a">A</div>
<div class="area b">B</div>
<div class="area c">C</div>は、このコードを試してみてください。
<html>
<head>
<style>
.left-section{float:left; width:25%;}
.right-section{float:left; width:75%;}
.area-left{width:100%; height:50%; background:#e5e5e5; border:2px solid #000;}
.area-right{border:2px solid #000; width:100%; height:100%; background:#e5e5e5;}
</style>
</head>
<body>
<div class="left-section">
<div class="area-left">
<span>Area B</span>
</div>
<div class="area-left">
<span>Area C</span>
</div>
</div>
<div class="right-section">
<div class="area-right">
<span>Area A</span>
</div>
</div>
</body>
</html>
あなたは何をしましたか？ –