0
当使用div容器时，我制作了四个垂直并排的列 当特定列悬停时，我希望列宽增加到70％其余列减少到10％浮动在那里线订单如何在同一时间更改悬停的多个div计数器列的宽度
例如，当column_about悬停在它上面会浮动到右侧，并增加到70％，而其余列浮动到左侧，并减少到10％停留在垂直线上。 ，当下一列column_skills悬停时，它将增加到70％，浮动报警到它所在的位置，而column_about减少到10％，浮动到右边，列_ref _port减少并浮动左边 等等-forth
一旦列的宽度增加了，我希望能够使上下文显示为图像，表格，文本，但是我不希望上下文在列未放大时看起来被压扁。
我是初学者，所以我对任何混乱的行话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>