Question

我用div容器制作了四个垂直的并排列当一个特定的列悬停在我想要的列宽度增加到70％而剩余的列减少到10％浮动在那里的行顺序

例如，当column_about悬停在它上面时，它将浮动到右边并增加到70％，而其余列浮动到左边，减少到10％保持在垂直线上。当下一列column_skills悬停在它上面时，它将增加到70％并浮动报复到它所在的位置，而column_about减少到10％并浮动到右边，列_ref _port减少并向左浮动等等等等

一旦列的宽度增加，我希望能够让上下文看起来像图像，表格，文本，但我不希望当列未放大时，上下文看起来会被压扁。

我是初学者所以我为任何令人困惑的行话道歉：）

    .column_about
{
	background-color: #F8F8F8;
	width: 40%;
	height: 700px;
	float: right;
	box-shadow: inset 0 0 1px #000;
}

.column_about:hover
{
	width: 70%;
	height: 700px;
}

.column_skills
{
	background-color: #434343;
	width: 20%;
	height: 700px;
	float: left;
	box-shadow: inset 0 0 1px #000;
}

.column_skills:hover
{
	width: 70%;
	height: 700px;
	
}

.column_ref
{
	background-color: #FAEBCD;
	width: 20%;
	height: 700px;
	float: left;
	box-shadow: inset 0 0 1px #000;
}

.column_ref:hover
{
	width: 70%;
	height: 700px;
}

.column_port
{
	background-color: #F7C873;
	width: 20%;
	height: 700px;
	float: left;
	box-shadow: inset 0 0 1px #000;
}

.column_port:hover
{
	width: 70%;
	height: 700px;
}

<!DOCTYPE html>
<html>

<head>
	
	<link rel="stylesheet" type="text/css" href="res.css">
	<meta charset="utf-8">

</head>

<body>

	<div class="column_about">
		<p>
		about me
		</p>
	</div>

	<div class="column_skills">
		<p>
		skills/experence
		</p>
	</div>

	<div class="column_ref">
		<p>
		references
		</p>
	</div>

	<div class="column_port">
		<p>
		portfolio
		</p>
	</div>

</body>

</html>

Answer 1

添加了.column-container所有内容都在里面，因此列将被设置为均匀，直到您将鼠标悬停在列上。每列中还有一个.column类，因此不必重复列样式。

＆＃13;

.column {
    width: 25%;
    height: 700px;
    float: right;
    box-shadow: inset 0 0 1px #000;
    overflow: hidden;
}

.column_about { background-color: #F8F8F8; }

.column_skills { background-color: #434343; }

.column_ref { background-color: #FAEBCD; }

.column_port { background-color: #F7C873; }

body:hover .column:not(:hover) {
    width: 10%;
}

.column:hover {
    width: 70%;
}

＆＃13;

<div class="column-container">
	<div class="column column_about">
		<p>about me</p>
	</div>

	<div class="column column_skills">
		<p>skills/experence</p>
	</div>

	<div class="column column_ref">
        <p>references</p>
	</div>

	<div class="column column_port">
		<p>portfolio</p>
	</div>
</div>

＆＃13;

如何在悬停的同时更改多个div计数器列的宽度

1 个答案: