0

我有以下 HTML 设置：

<p class="vcard contact" role="contentinfo">
 <a class="org url organization-name" href="url" title="organization">organization</a><br>
 <span class="fn">name</span><br>
 <a class="tel" href="tel:tel">tel</a><br>
 <a class="email" href="mailto:email">email</a>
</p>

我会应用什么 CSS 来制作这个列？例如，左侧的组织和名称以及右侧的电话和电子邮件。

我可以更改 HTML，但我希望它是模块化的，并保持 HTML 和 CSS 严格分开。

4

4 回答 4

1

检查这个小提琴

.vcard
{
    position:relative;
}

.organization-name
{
    position:absolute;
    top:0;
    left:0;
}

.fn
{
    position:absolute;
    top:20px;
    left:0;
}

.tel
{
    position:absolute;
    top:0;
    left:50%;
}

.email
{
    position:absolute;
    top:20px;
    left:50%;
}
于 2013-10-13T10:53:28.497 回答
1

你的意思是如何制作列？你可以稍微改变一下顺序，让所有元素块，然后浮动它们，这样 vcard 中的每个元素都占据 50% 的宽度。

删除换行符也可以更容易地使用 css 进行操作

.vcard a, .vcard .fn {
    display : block;
    float : left;
    width : 50%;
}

http://jsfiddle.net/mickadoo/zSytv/

于 2013-10-13T10:58:25.817 回答
0

http://jsfiddle.net/DzucC/4/

.col1 { float:left; } .col2 {  float:left;
    margin-left:15px; }

<div>
    <div class="vcard contact col1" role="contentinfo">
     <a class="org url organization-name" href="url" title="organization">organization</a>  <br>
     <span class="fn">name</span><br>
    </div>
    <div class="col2">
        <a class="tel" href="tel:tel">     tel</a><br>
        <a class="email" href="mailto:email">email</a>
    </div> </div>
于 2013-10-13T10:56:36.430 回答
0

使用<table>, <td>,<tbody>等<thead>。阅读：http ://www.w3schools.com/html/html_tables.asp

于 2013-10-13T10:57:01.200 回答