在此代码中:https://codepen.io/anon/pen/GGrVdK
我不能将类为foul-row
的div的高度减少到4px,因为每个foul
div都是4px高的。
.foul{
background: linear-gradient(to bottom right, rgb(0,0,0), rgb(92,92,92));
height: 4px;
margin-top:0;
margin-bottom: 0;
margin-right: 2px;
width: 15px;
display: inline-block;
}
如果我尝试将一个高度设置为foul-row
类,要么在包含cell
的div中有滚动条,要么看不到foul
div。
这里有一个cell
类
.cell{
padding: 6px 8px 0 8px;
white-space: nowrap;
font-size: 13px;
min-width: 27px;
display: block;
overflow: auto;
height: 36px; /*I would like to remove this, but if I do, I have visualization problems*/
}
这就是“有罪”细胞的结构
<div class="cell white">
<div>Home Team</div>
<div class="foul-row">
<div class="foul"></div><div class="foul"></div><div class="foul">/div><div class="foul"></div><div class="foul"></div>
</div>
</div>
如何减少foul-row
的高度以适应foul
的高度,并减少cell
的总高度?谢谢
发布于 2018-06-11 08:01:10
您的height:4px
将被字体大小覆盖,默认字体大小为16px,因为它需要有显示文本的空间。
现在,由于div.foul
没有任何文本,所以可以将其字体设置为0。
body {
font-family: 'Fjalla One', sans-serif;
text-transform: uppercase;
letter-spacing: 0.02em;
/* background-image: url(https://dynamitick.com/wp-content/uploads/2018/01/legnano-basket-19-sempione-news.jpg); */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
}
.red {
background-color: rgba(255, 0, 0, 0.7);
color: white;
}
.blue {
background-color: rgba(0, 0, 255, 0.7);
color: white
}
.black {
background-color: rgba(0, 0, 0, 0.7);
color: white;
}
.green {
background-color: rgba(0, 128, 0, 0.7);
color: white;
}
.yellow {
background-color: rgba(255, 255, 0, 0.7);
color: blue;
}
.white {
background-color: rgba(255, 255, 255, 0.7);
color: blue;
}
.grey {
background-color: rgba(128, 128, 128, 0.7);
color: white;
}
.score {
text-align: right;
}
.cell {
padding: 6px 8px 0 8px;
/* display: inline-flex; */
/* overflow: auto; */
white-space: nowrap;
font-size: 13px;
min-width: 27px;
/* min-height: 16px; */
display: block;
overflow: auto;
height: 36px;
/* text-overflow: ellipsis */
}
.shadow {
background: linear-gradient(rgba(255, 255, 255, 1), rgba(0, 0, 0, 1), rgba(255, 255, 255, 1));
}
.column {
display: inline-block;
height: 100%;
}
.separator {
display: inline-block;
width: 1px;
}
.timer {
/* width: 60px; */
text-align: center;
}
.container {
border-radius: 10px;
overflow: hidden;
display: table;
clear: both;
font-size: 0;
animation-name: rotation;
animation-duration: 1s;
border: 1px solid grey;
}
@keyframes rotation {
from {
transform: rotateX(90deg);
}
to {
transform: rotateX(0deg);
}
}
.bottom-left {
position: absolute;
bottom: 3vh;
left: 2vh;
}
.bottom-right {
position: absolute;
bottom: 3vh;
right: 2vh;
}
.top-right {
position: absolute;
top: 3vh;
right: 2vh;
}
.top-left {
position: absolute;
top: 3vh;
left: 2vh;
}
.message-title {
text-align: center;
}
.message-body {
text-align: center;
min-width: 150px;
background-color: rgba(0, 0, 0, 0.66);
color: white;
text-transform: none
}
.half-shadow-up {
background: linear-gradient(rgba(255, 255, 255, 1), rgba(128, 128, 128, 1));
}
.tv-logo img {
max-width: 150px;
max-height: 150px;
margin: auto;
}
.foul {
background: linear-gradient(to bottom right, rgb(0, 0, 0), rgb(92, 92, 92));
height: 4px;
margin-top: 0;
margin-bottom: 0;
font-size: 0;
margin-right: 2px;
width: 15px;
display: inline-block;
}
.foul-row {
height: 4px;
}
<link href="https://fonts.googleapis.com/css?family=Fjalla+One" rel="stylesheet">
<div class="container shadow top-right">
<div class="column timer">
<div class="cell red"><span>00:00</span></div>
<div class="cell red">Q4</div>
</div>
<div class="separator"></div>
<div class="column">
<div class="cell white">
<div>Home Team</div>
<div class="foul-row">
<div class="foul"></div>
<div class="foul"></div>
<div class="foul"></div>
<div class="foul"></div>
<div class="foul"></div>
</div>
</div>
<div class="cell green">
<div>Guest team</div>
<div class="foul-row">
<div class="foul"></div>
<div class="foul"></div>
<div class="foul"></div>
<div class="foul"></div>
<div class="foul"></div>
</div>
</div>
</div>
<div class="separator"></div>
<div class="column score">
<div class="cell white">
100
</div>
<div class="cell green">
65
</div>
</div>
</div>
<div class="container bottom-left">
<div class="column">
<div class="cell white half-shadow-up message-title">
10 A. Player
</div>
<div class="cell message-body">
24 pts, 8 reb
</div>
</div>
</div>
发布于 2018-06-11 05:55:03
将height:4px
元素的overflow
属性更改为foul-row
后,请尝试将cell
添加到hidden
.cell{
padding: 6px 8px 0 8px;
white-space: nowrap;
font-size: 13px;
min-width: 27px;
display: block;
overflow: hidden; /* changed */
height: 36px;
}
https://stackoverflow.com/questions/50788235
复制相似问题