CSS/HTML：酒吧/桌上的文字？

我希望做的东西看起来像这样：CSS/HTML：酒吧/桌上的文字？

http://img291.imageshack.us/img291/5571/bartablestyling.png

（现在我只有在顶部那个酒吧）

当我尝试写文，它就会下profilepicture。我不想使用float：left。

我该如何制作一张表格，使得文本和我绘制的红色箭头一样，我想知道如何调整它之间的宽度？

这里是我的代码现在：

<div style="background-image: url(images/notificationShelfBg4.png); 
    background-repeat: repeat-x; 
    background-position: bottom; width: auto;"> 

      <img src="<?php if(!empty($vP["photo_thumb"])) { echo "images/profileimages/".$vP["photo_thumb_small"]; }else{ echo "images/profileimages/noPhoto_thumb.jpg"; } ?>" style=" border: 2px solid #CCC; margin-right: 5px; margin-left: 15px; margin-bottom: 2px;"> 


    </span> 
    </span> 
    </a> 

</div>

来源

2010-08-30 Karem

为什么你不希望使用'浮动：左;'？另外，我们不需要看到您的PHP代码就像它生成的标记一样。 – 2010-08-30 13:58:01

因为然后背景图片，只为我插入的文本背景和图片太.. – Karem 2010-08-30 13:59:31

我不知道我明白，但我认为你可以解决这个问题'float：left;' - 一切在酒吧。 – 2010-08-30 14:04:32

一个方法是创建4列和2行的表。

<table border="0" cellspacing="0" cellpadding="0" > 
<tr> 
<td>You're inlogged as:</td> 
<td>Sex: Male</td> 
<td>Field:1</td> 
<td>Field:1</td> 
</tr> 
<tr> 
<td>Adrew</td> 
<td>Age: 22</td> 
<td>Field:1</td> 
<td>Field:1</td> 
</tr> 
</table>

然后用CSS你可以修改单元格的宽度。例如，你可以使用

td {width:200px;}

，或者你可以在每个细胞中使用的一类像<td class="cell">Sex: Male</td>，然后在这个类应用风格类似。细胞{width:200px;} CSS。

当然我仍然相信你可以使用浮动和一些技巧（如果有需要）来获得预期的结果。

来源

2010-08-30 14:23:21 Sotiris

您可以使用此HTML标记：

<div class="profile"> 
    <img src="path/to/your/img.png" alt="Example's Avatar" /> 
    <p class="login-info">You are logged in as: <span class="username">Example User</span></p> 
    <ul class="user-info"> 
     <li>Gender: Male</li> 
     <li>Age: 24</li> 
     <li>Member since: 24 Aug 2009</li> 
     <li>Currently wearing: Pink T-Shirt</li> 
     <li>Email: [email protected]</li> 
     <li>Another field: Value 1</li> 
     <li>Drinking: Coffee</li> 
     <li>Mug collection: 300</li> 
     <li>Another field: Value 2</li> 
    </ul> 
</div>

我们使用的列表，段落和图像的混合物来得到我们想要的标记。例如，字段列表显然是一个列表，所以我们在这里使用ul无序列表元素。我们还使用img代码代替background-image，因为配置文件图像很重要，并且包含实际信息。

.profile { 
    padding: 20px; 
    background: #333 url('path/to/gradient.png') repeat-x; 
    overflow: hidden; 
    font-size: 13px; 
    line-height: 1.6em; 
    font-family: Arial, sans-serif; 
    color: white; 
    width: 960px; 
} 

.profile img { 
    width: 80px; 
    height: 80px; 
    border: 1px solid #eee; 
    display: block; 
} 

.profile .login-info, .profile .user-info li, .profile .user-info, .profile img { 
    float: left; 
    margin-right: 30px; 
} 

.profile .login-info { 
    margin-right: 60px; 
} 

.profile .user-info { 
    width: 665px; 
    font-size: 12px; 
    margin: 0; 
} 

.profile .user-info li { 
    width: 190px; 
} 

.profile .login-info .username { 
    display: block; 
    font-size: 18px; 
    font-weight: bold; 
    margin-top: 3px; 
}

CSS与标记分离 - 这很重要，因为我们希望将内容和样式分开。基本上，使用我们在HTML中添加的classES，我们给出了配置文件样式信息的内容，这些信息将导致它以您在图片中指定的方式呈现。

我们将该配置文件框中的几乎所有东西都浮起来，然后给它们指定宽度，以便它们在列中彼此相邻，最后给它们一个右边的余量，以在列之间给它们一定的空间。

你可以看到它住在这里：http://jsfiddle.net/stEkY/

来源

2010-08-30 14:54:04

CSS/HTML：酒吧/桌上的文字？

回答

相关问题