0
divコンテナを使用して4つの縦に並んだ列を作成する 特定の列を上に移動すると列幅が70％残りの列は列内で10％浮動小数点に減少する複数のdiv countainer列の幅を同時に変更する方法
たとえば、列の上にカーソルを置くと、右に浮動し、残りの列が左に浮動し、10％に減少する縦線で示す。 次の列column_skillsが上にホールドされると、70％に増加し、列のアバウトが10％に減少し、右側に浮動小数点_ref _portが減少して浮動小数点を左に浮動小数点になります。 など-forth
一度列の幅が拡大されたら、私は画像、表、テキストのようにコンテキストを表示したいと思っていますが、
私は混乱のLingo THXについて謝罪ので、私は初心者です:)
.column_about
{
\t background-color: #F8F8F8;
\t width: 40%;
\t height: 700px;
\t float: right;
\t box-shadow: inset 0 0 1px #000;
}
.column_about:hover
{
\t width: 70%;
\t height: 700px;
}
.column_skills
{
\t background-color: #434343;
\t width: 20%;
\t height: 700px;
\t float: left;
\t box-shadow: inset 0 0 1px #000;
}
.column_skills:hover
{
\t width: 70%;
\t height: 700px;
\t
}
.column_ref
{
\t background-color: #FAEBCD;
\t width: 20%;
\t height: 700px;
\t float: left;
\t box-shadow: inset 0 0 1px #000;
}
.column_ref:hover
{
\t width: 70%;
\t height: 700px;
}
.column_port
{
\t background-color: #F7C873;
\t width: 20%;
\t height: 700px;
\t float: left;
\t box-shadow: inset 0 0 1px #000;
}
.column_port:hover
{
\t width: 70%;
\t height: 700px;
}<!DOCTYPE html>
<html>
<head>
\t
\t <link rel="stylesheet" type="text/css" href="res.css">
\t <meta charset="utf-8">
</head>
<body>
\t <div class="column_about">
\t \t <p>
\t \t about me
\t \t </p>
\t </div>
\t <div class="column_skills">
\t \t <p>
\t \t skills/experence
\t \t </p>
\t </div>
\t <div class="column_ref">
\t \t <p>
\t \t references
\t \t </p>
\t </div>
\t <div class="column_port">
\t \t <p>
\t \t portfolio
\t \t </p>
\t </div>
</body>
</html>