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：酒吧/桌上的文字？

回答

相關問題