1
私のウェブページには3つの列にコンテンツセクションを作成します。ページの左側に固定幅の250pxを1列、固定幅を1列、右側に250pxの1列ページの幅と中央の列は、ブラウザの幅に応じてサイズを変更する必要があります。ブートストラップは固定幅のオプションがないので使用したくありません。CSSでシンプルなレイアウトを作成するのが難しい
A
答えて
0
あなたはそれを達成することができる[？残りの水平方向のスペースを埋めるためのdivを作成する方法]
.main {
position: relative;
margin: 0;
padding: 0;
height: 100vh;
width: 100%;
}
.left,
.right {
position: absolute;
width: 250px;
background: pink;
top: 0;
bottom: 0;
margin: 0;
}
.left {
left: 0;
}
.right {
right: 0;
}
.middle {
margin: 0 250px;
}<div class="main">
<div class="left">
left
</div>
<div class="middle">
middle
</div>
<div class="right">
right
</div>
</div>+0
TAAさん、ありがとうございました。 –
0
あなたはこのような何かを試すことができます;）
#div1 {
width: 25vw;
height: 100vh;
background: red;
}
#div2 {
height: 100vh;
margin-left: 25vw;
width:50vw;
margin-top:-100vh;
background: green;
}
#div3 {
width: 35vh;
height: 100vh;
margin-top:-100vh;
margin-left: 75vw;
background: blue;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<script src="index.js"></script>
<link href="index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
</html>+0
こんにちはRazvan Alex、あなたの結果は私の期待とほとんど関係しています。私はw3school.com - http://www.w3schools.com/html/default.asp - で関連するレイアウトを見つけました。私は初心者ですので、ページのソースコードを理解できませんでした。コード内のこの応答レイアウトを簡単に記述してください。 –
+0
ねえ、レスポンシブデザインは 'vw'と' vh'によって与えられます。ドキュメントをチェックすると、1vh/vw =画面全体の幅/高さの1％;）。あなたが助けてくれた願望 –
0
おそらく、テーブル要素でこれを行うには簡単です：
<table style="width:100%;height:100%;text-align:center">
<tr>
<td style="width:250px; background-color:red">
<h1>Column One</h1>
</td>
<td style="background-color:green">
<h1>Column Two</h1>
</td>
<td style="width:250px;background-color:blue">
<h1>Column Three</h1>
</td>
</tr>
</table>
+0
はい私はちょうど私が欲しいものを私に与えてくれましたが、divを取るのにかかる時間が短くて済むのでテーブルを使いたくありません。だからダイビングはもっと親しみやすいです –
の可能性のある重複（http://stackoverflow.com/questions/1032914：ポジショニングは、一例としてこれを見ます/ how-to-make-a-div-to-left-space） –