所以基本上,我希望在<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');
}
&#13;
<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>
&#13;
它适用于... 2行。
但是一旦我获得了一个换行符(因为文本太长了 - 这应该发生)它只是打破了整个事情:
有关该怎么做的任何建议?
答案 0 :(得分: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>