.flexbox{width:500px;
height:300px;
display:-webkit-box;
display:box;
flex-wrap:wrap;
-webkit-box-orientation:vertical;
box-orientation:vertical;}
.flexbox>div{-webkit-transition:ease-in;
transition:ease-in;
-webkit-border-radius:10px;
border-radius:10px;
border:solid black;
width:500px;
height:38px;
margin:-10px 10px 0px 10px;
padding:20px 20px 20px 20px;
box-shadow:10px 10px 10px dimgrey;
overflow:hidden;}
.flexbox>div:nth-child(1){background-color:lightgrey;}
.flexbox>div:nth-child(2){background-color:lightgrey;}
.flexbox>div:nth-child(3){background-color:lightgrey;}
.flexbox>div:nth-child(4){background-color:lightgrey;}
.flexbox>div:hover{height:400px;color:white;font-weight:bold;}
.flexbox>div:nth-child(1):hover{background-color:blue;}
.flexbox>div:nth-child(2):hover{background-color:red;}
.flexbox>div:nth-child(3):hover{background-color:green;}
.flexbox>div:nth-child(4):hover{background-color:orange;}
.multicolumn{-webkit-column-count:3;
-webkit-column-gap:30px;
-webkit-column-rule:1px black outset;} <div class="flexbox">
<div><p>the first div content<br><br>Once you have mastered the use of topic sentences, you may decide that the topic sentence for a particular paragraph really shouldn’t be the first sentence of the paragraph. This is fine—the topic sentence can actually go at the beginning, middle, or end of a paragraph; what’s important is that it is in there somewhere so that readers know what the main idea of the paragraph is and how it relates back to the thesis of your paper. Suppose that we wanted to start the piranha paragraph with a transition sentence—something that reminds the reader of what happened in the previous paragraph—rather than with the topic sentence. Let’s suppose that the previous paragraph was about all kinds of animals that people are afraid of, like sharks, snakes, and spiders. Our paragraph might look like this (the topic sentence is bold):
Like sharks, snakes, and spiders, piranhas are widely feared. Although most people consider piranhas to be quite dangerous, they are, for the most part, entirely harmless. Piranhas rarely feed on large animals; they eat smaller fish and aquatic plants. When confronted with humans, piranhas’ first instinct is to flee, not attack. Their fear of humans makes sense. Far more piranhas are eaten by people than people are eaten by piranhas. If the fish are well-fed, they won’t bite humans.</p></div>
<div><p>the second div content</p></div>
<div><p>the third div content</p></div>
<div><p>the fourth div content</p></div>
</div>
<br>
<div class="multicolumn">
<p>whatever text on the first column</p>
<p>whatever text on the second column</p>
<p>whatever text on the third column</p>
</div>如您所見，每當我將滑鼠懸停以擴展 div flexbox 時，多列都會與 flexbox 重疊。我嘗試添加 margin-top 和 margin-bottom 但沒有奏效。我怎樣才能解決這個問題？
uj5u.com熱心網友回復：
您需要洗掉固定height在.flexbox：
.flexbox {
width: 500px;
/*height: 300px;*/
display: -webkit-box;
display: box;
flex-wrap: wrap;
-webkit-box-orientation: vertical;
box-orientation: vertical;
}
.flexbox>div {
-webkit-transition: ease-in;
transition: ease-in;
-webkit-border-radius: 10px;
border-radius: 10px;
border: solid black;
width: 500px;
height: 38px;
margin: -10px 10px 0px 10px;
padding: 20px 20px 20px 20px;
box-shadow: 10px 10px 10px dimgrey;
overflow: hidden;
}
.flexbox>div:nth-child(1) {
background-color: lightgrey;
}
.flexbox>div:nth-child(2) {
background-color: lightgrey;
}
.flexbox>div:nth-child(3) {
background-color: lightgrey;
}
.flexbox>div:nth-child(4) {
background-color: lightgrey;
}
.flexbox>div:hover {
height: 400px;
color: white;
font-weight: bold;
}
.flexbox>div:nth-child(1):hover {
background-color: blue;
}
.flexbox>div:nth-child(2):hover {
background-color: red;
}
.flexbox>div:nth-child(3):hover {
background-color: green;
}
.flexbox>div:nth-child(4):hover {
background-color: orange;
}
.multicolumn {
-webkit-column-count: 3;
-webkit-column-gap: 30px;
-webkit-column-rule: 1px black outset;
}<div class="flexbox">
<div>
<p>the first div content<br><br>Once you have mastered the use of topic sentences, you may decide that the topic sentence for a particular paragraph really shouldn’t be the first sentence of the paragraph. This is fine—the topic sentence can actually
go at the beginning, middle, or end of a paragraph; what’s important is that it is in there somewhere so that readers know what the main idea of the paragraph is and how it relates back to the thesis of your paper. Suppose that we wanted to start
the piranha paragraph with a transition sentence—something that reminds the reader of what happened in the previous paragraph—rather than with the topic sentence. Let’s suppose that the previous paragraph was about all kinds of animals that people
are afraid of, like sharks, snakes, and spiders. Our paragraph might look like this (the topic sentence is bold): Like sharks, snakes, and spiders, piranhas are widely feared. Although most people consider piranhas to be quite dangerous, they are,
for the most part, entirely harmless. Piranhas rarely feed on large animals; they eat smaller fish and aquatic plants. When confronted with humans, piranhas’ first instinct is to flee, not attack. Their fear of humans makes sense. Far more piranhas
are eaten by people than people are eaten by piranhas. If the fish are well-fed, they won’t bite humans.</p>
</div>
<div>
<p>the second div content</p>
</div>
<div>
<p>the third div content</p>
</div>
<div>
<p>the fourth div content</p>
</div>
</div>
<br>
<div class="multicolumn">
<p>whatever text on the first column</p>
<p>whatever text on the second column</p>
<p>whatever text on the third column</p>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/436801.html