我的网站右侧有一个字体部分的当前状态,名为:"单词是您可以用3个单词创建自己故事的地方!"
样式网站:http://words.goldwingstudios.de
但我希望它看起来像这样:
以下是此部分的源代码:
<div class="__log_reg_preview_slogan_container">
<div class="__log_reg_preview_slogan_quotes">
"
</div>
<div class="__log_reg_preview_slogan">
Words is the place where you can create your own story out of <b class="__log_reg_preview_slogan_quotes_textbig">3</b> words!
</div>
<div class="__log_reg_preview_slogan_quotes">
"
</div>
<div class="fix_float"></div>
</div>
CSS
.__log_reg_preview_slogan_container
{
width: 80%;
height: 15%;
margin: 0 auto;
text-align: center;
display: table;
font-family: words_chat_text;
}
.__log_reg_preview_slogan
{
display: inline-block;
width: 400px;
display: table-cell;
font-size: 14px;
}
.__log_reg_preview_slogan_quotes
{
display: inline-block;
position: relative;
vertical-align: bottom;
display: table-cell;
font-size: 55px;
font-weight: bold;
line-height: 101px;
}
.__log_reg_preview_slogan_quotes:not(:first-child)
{
display: inline-block;
position: relative;
vertical-align: bottom;
display: table-cell;
font-size: 55px;
font-weight: bold;
line-height: 20px;
}
有谁可以告诉我,我做错了什么?
答案 0 :(得分:2)
新CSS类
.bottom_quote {
line-height: 0;
vertical-align: bottom;
padding-bottom: 8px;
}
将类添加到底部引号:
<div class="__log_reg_preview_slogan_container">
<div class="__log_reg_preview_slogan_quotes bottom_quote">
"
</div>
<div class="__log_reg_preview_slogan">
Words is the place where you can create your own story out of <b class="__log_reg_preview_slogan_quotes_textbig">3</b> words!
</div>
<div class="__log_reg_preview_slogan_quotes">
"
</div>
<div class="fix_float"></div>
</div>
预览强>