基本上,我想在 <div>
旁边添加 3 行文本,像这样(photoshop 样机):
到目前为止,这是我的结构:
.gd-content .gd-c-match.in-match .gd-c-match-tutorial {
margin-top: -5px;
width: 100%;
height: 99px;
background-color: rgba(0, 0, 0, 0.66);
padding-top: 24px;
padding-bottom: 18px;
text-align: center;
}
.gd-content .gd-c-match.in-match .gd-c-match-tutorial .gd-c-tutorial-section {
height: 57px;
width: 290px;
text-align: left;
}
.gd-content .gd-c-match.in-match .gd-c-match-tutorial .gd-c-tutorial-section .title {
display: inline-block;
color: white;
font-size: 16px;
font-weight: 600;
}
.gd-content .gd-c-match.in-match .gd-c-match-tutorial .gd-c-tutorial-section .title .subtitle {
display: block;
font-weight: 400;
color: #494949;
font-size: 14px;
}
.gd-content .gd-c-match.in-match .gd-c-match-tutorial .gd-c-tutorial-section .gd-c-tutorial-square {
display: inline-block;
text-align: center;
padding-top: 19px;
padding-right: 3px;
line-height: 17px;
font-family: 'Uni Sans';
font-weight: bold;
font-size: 24px;
color: white;
height: 100%;
width: 57px;
background-image: url('../../img/gd_content_match_tutorial_square.png');
}
<div class="gd-content">
<div class="gd-c-match in-match">
<div class="gd-c-match-tutorial">
<div class="gd-c-tutorial-section">
<div class="gd-c-tutorial-square">1</div><span class="title">Contact Opponent
<span class="subtitle">Add the other player</span></span>
</div>
</div>
</div>
</div>
而且它有效... 2 行。
但是一旦我得到一个换行符(因为文本太长——这是应该发生的),它就会破坏整个事情:
有什么建议吗?
最佳答案
设置.title
的宽度为70%
.gd-content .gd-c-match.in-match .gd-c-match-tutorial .gd-c-tutorial-section .title {
display: inline-block;
color: white;
font-size: 16px;
font-weight: 600;
width:70%;
}
希望这有帮助..由我测试..
.gd-content .gd-c-match.in-match .gd-c-match-tutorial {
margin-top: -5px;
width: 100%;
height: 99px;
background-color: rgba(0, 0, 0, 0.66);
padding-top: 24px;
padding-bottom: 18px;
text-align: center;
}
.gd-content .gd-c-match.in-match .gd-c-match-tutorial .gd-c-tutorial-section {
height: 57px;
width: 290px;
text-align: left;
}
.gd-content .gd-c-match.in-match .gd-c-match-tutorial .gd-c-tutorial-section .title {
display: inline-block;
color: white;
font-size: 16px;
font-weight: 600;
width:70%;
}
.gd-content .gd-c-match.in-match .gd-c-match-tutorial .gd-c-tutorial-section .title .subtitle {
display: block;
font-weight: 400;
color: #494949;
font-size: 14px;
}
.gd-content .gd-c-match.in-match .gd-c-match-tutorial .gd-c-tutorial-section .gd-c-tutorial-square {
display: inline-block;
text-align: center;
padding-top: 19px;
padding-right: 3px;
line-height: 17px;
font-family: 'Uni Sans';
font-weight: bold;
font-size: 24px;
color: white;
float: left;
height: 100%;
width: 57px;
background-image: url('../../img/gd_content_match_tutorial_square.png');
}
<div class="gd-content">
<div class="gd-c-match in-match">
<div class="gd-c-match-tutorial">
<div class="gd-c-tutorial-section">
<div class="gd-c-tutorial-square">1</div><span class="title">Contact Opponent
<span class="subtitle">Add the other player ingame and form a party</span></span>
</div>
</div>
</div>
</div>
关于html - div 旁边的 3 行文本问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33677563/