所以我附上了一张截图,我希望我的内容单元格停止扩展超过600px的高度,因为当屏幕缩小时会出现奇怪的设计视图。相反,我希望文本要么变小,要么变为滚动行为。
我的相关CSS代码。
.chars{
padding: 100px;
padding-top: 32px;
margin-bottom: 32px;
display:grid;
grid-template-columns: auto auto auto;
grid-auto-flow: dense;
row-gap: 24px;
border-top: 1px solid rgb(168, 168, 168);
border-bottom: 1px solid rgb(168, 168, 168);
transition: all 0.5s;
min-width: 400px;
min-height: 600px;
overflow: hidden;
}
/* Setting all images of characters to fit in their cells. */
.chars img{
width:400px;
height:auto;
border-radius: 3%;
transition: 0.3s;
}
.chars img:hover{
width: 413px;
height: auto;
}
.char1-img, .char3-img, .char5-img{
grid-area: auto/1/auto/1;
padding-top: 12px;
padding-bottom: 12px;
}
.char1-content,.char3-content,.char5-content{
grid-area: auto/2/auto/ -1;
align-self: center;
justify-self: center;
font-family: 'Open Sans', sans-serif;
font-size: 22px
}
.char2-img,.char4-img,.char6-img{
grid-area: auto/3/auto/3;
padding-top: 12px;
padding-bottom: 12px;
}
.char2-content,.char4-content,.char6-content{
grid-area: auto/1/auto/ span 2;
padding-top: 12px;
padding-bottom: 12px;
align-self: center;
justify-self: center;
font-family: 'Open Sans', sans-serif;
font-size: 22px
}
.char1-content p,
.char2-content p,
.char3-content p,
.char4-content p,
.char5-content p,
.char6-content p
{
background-image: linear-gradient(to right, rgba(235, 235, 235, 0), rgba(228, 228, 228, 0.8));
padding-top: 32px;
padding-left: 150px;
padding-right: 150px;
padding-bottom: 32px;
border-radius: 1%;
color:grey;
}
.char1-content h1,
.char3-content h1,
.char4-content h1,
.char5-content h1,
.char2-content h1,
.char6-content h1
{
text-align: center;
}
HTML代码
<section class="chars">
<div class="char1-img">
<img src="./images/Leona.jpg">
</div>
<div class="char1-content">
<h1>The Creed of Face Swappers</h1>
<p>
Leon Harper or rather Leona Harper is part of a creed of Assassins and spies who have the uncanny
ability to morph into any face they desire so as long as it is of the same gender and once they are
in
contact of it with the intent of morphing, Leona however is special even among her peers due to her
ability to not only swap faces but also into one of any man or woman this has undoubtedly led her to
be
one of the most proficient and competent among the rest despite being a new recruit placing her in
high
regards for the Elders in the Creed.
Much to the confusion surrounding her actual gender she has occasionally put out that she prefers to
spend most of her time as a woman and to be addressed as Leona rather than her male counterpart
"Leon".
Whatever the case may be no one can deny her stunningly enchanting appearance regardless of what she
chooses to go by.
</p>
</div>
<div class="char2-img">
<img src="./images/Elizabeth.jpg">
</div>
<div class="char2-content">
<h1>Flames Of The Old World</h1>
<p>
Elizabeth Burnley, a once-promising doctor, scientist, and scholar in a world where those
professions are distant memories. Raised in a post-apocalyptic realm ravaged by a relentless virus,
Elizabeth's life took a tragic turn when she lost her father to the very disease he fought to cure.
As she now navigates a harsh existence within a hidden vault, her journey as a doctor accompanying
search parties outside takes an unexpected turn, challenging her to adapt and survive in a world
where danger and mystery lurk at every corner.
</p>
</div>
<div class="char3-img">
<img src="./images/abiha-al-farsi.jpg">
</div>
<div class="char3-content">
<h1>Abiha-al-Farsi</h1>
<p>
"But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was
born and I will give you a complete account of the system, and expound the actual teachings of the
great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or
avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue
pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who
loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally
circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial
example, which of us ever undertakes laborious physical exercise, except to obtain some advantage
from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no
annoying consequences, or one who avoids a pain that produces no resultant pleasure?"
</p>
</div>
<div class="char4-img">
<img src="./images/katrya.jpg">
</div>
<div class="char4-content">
<h1>The Ukranian Civil War</h1>
<p>
"But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was
born and I will give you a complete account of the system, and expound the actual teachings of the
great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or
avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue
pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who
loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally
circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial
example, which of us ever undertakes laborious physical exercise, except to obtain some advantage
from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no
annoying consequences, or one who avoids a pain that produces no resultant pleasure?"
</p>
</div>
<div class="char5-img">
<img src="./images/1.jpg">
</div>
<div class="char5-content">
<h1>Broken Dreams</h1>
<p>
"But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was
born and I will give you a complete account of the system, and expound the actual teachings of the
great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or
avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue
pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who
loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally
circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial
example, which of us ever undertakes laborious physical exercise, except to obtain some advantage
from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no
annoying consequences, or one who avoids a pain that produces no resultant pleasure?"
</p>
</div>
<div class="char6-img">
<img src="./images/9.jpg">
</div>
<div class="char6-content">
<h1>Blood Pact</h1>
<p>
"But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was
born and I will give you a complete account of the system, and expound the actual teachings of the
great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or
avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue
pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who
loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally
circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial
example, which of us ever undertakes laborious physical exercise, except to obtain some advantage
from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no
annoying consequences, or one who avoids a pain that produces no resultant pleasure?"
</p>
</div>
</section>
我使用了溢出,最小-最大高度/宽度,但不起作用。
