其他文字前面的一些文字(css)

时间:2011-05-13 06:06:11

标签: html css

我想重现与下面截图相同的内容,我不知道如何继续。 我想要一个大字体文本(12.560),旁边我想要两行小文字。

Screenshot

感谢您的帮助。

3 个答案:

答案 0 :(得分:3)

从布局的角度来看,这应该让你开始。

你可以用你想要的任何东西交换元素。

HTML

<h3>12.560</h3>
<div>
    <h4>Title</h4>
    <span>Dossir</span>
</div>

CSS

h3, 
div {
    float: left;   
}

h3 {
    font-size: 40px;   
}

div {
   padding-left: 10px;   
}

div span {
   font-weight: bold;  
} 

jsFiddle

答案 1 :(得分:1)

HTML

<span class='big'>12.560</span><span>title<br>dossier de press</span>

CSS

.big{
    font-size: 230%;
    float: left;
}

您可以将整个事物包装在div中以避免干扰其他布局

http://jsfiddle.net/NG2zy/

答案 2 :(得分:0)

您还可以使用表格和内部表格来获得此效果。但它里面没有CSS魔法。

<table style="background-color:rgb(244,248,253);font-family: Arial,Liberation Sans,Verdana,'Courier New', monospace">
    <tr>
    <td style="font-size:36px;font-weight:bold">
    12.560
    </td>
    <td>
    <table>
        <tr>
            <td>
            Title
            </td>
        </tr>
        <tr>
            <td style="font-weight:bold">
            Dossier de presse
            </td>
        </tr>
    </table>
    </td>
    </tr>
<table>