asp.net中的設計問題？

在我的應用程序中，我正在顯示圖像（圖像大小爲90px寬度，90px高度），並且低於我在數據列表控件（水平顯示）中顯示圖像的標題。我在源代碼中使用了表格（標籤）。圖像和標題將從數據庫動態顯示。我的問題是，當標題太長時，它會打亂我的設計，當標題太長時，它應該會下降，如果標題太長，則標題應該與圖片大小相同，如果太長，它會在第二行中出現。asp.net中的設計問題？

例如下面是一個圖像以及其下的圖像標題

 -------------- 
    |    | 
    |    | 
    |    | 
    |    | 
    |    | 
    |_____________| 
    surya sasidhar rao

上述圖像標題太長。字母「rao」應該排在第二行。

-------------- 
    |    | 
    |    | 
    |    | 
    |    | 
    |    | 
    |_____________| 
    surya sasidhar 
    rao

這是我想要的設計。我怎麼才能得到它。這是我的源代碼

'的CommandName = 「播放」 CommandArgument =' <％＃的eval（「VideoName」）+ 「|」 +的eval（「視頻ID」）+ 「」 +的eval（「用戶名」）％>」寬度= 「90像素」 HEIGHT = 「90像素」/>
'的CommandName = 「標題」 CommandArgument =' <％＃的eval（「VideoName」）+ 「|」 + Eval（「videoid」）+「，」+ Eval（「username」）％>'> '> '>

alt text http://c:%5C%5Cmyimage

來源

2010-03-05 Surya sasidhar

我使用的表像

– 2010-03-05 09:45:55

你管中他們如何保持圖像對齊。如果視頻的標題太長，即使圖像和它的標題對齊相同 – 2010-03-05 11:28:34

回答

一個關於網絡發展的偉大的事情是，源代碼是有目共睹的，看，從靈感。使用FireFox中的FireBug或Internet Explorer 8中的開發人員工具等工具可以更輕鬆地進行操作。

打開您想要模擬的頁面，並檢查相關區域周圍的代碼。您會看到YouTube不使用表格，而是使用div和css。

<div class="feedmodule-body grid-view"> 
    <!-- "Video display module" starts here, with the Clear Left class --> 
    <div class="clearL"> 
    <div class="video-cell" style="width:24.5%"> 
     <div class="video-entry yt-uix-hovercard"> 
     <a class="video-thumb-120" href="/path-to-video"><img src="thumbnail" /> 
      </a> 
     <div class="video-main-content video-title-one-line"> 
      <div class="video-title "> 
      <div class="video-short-title"> 
       <a href="/path-to-video">The shortened title goes here, but still 
       wraps...</a> 
      </div> 
      <div class="video-long-title"> 
       <a href="/path-to-video">The full title goes here, and would still 
       wraps when it's shown.</a> 
       <div class="video-logos"></div> 
      </div> 
      </div> 
      <div class="video-description">Description</div> 
      [...] 
     </div> 
     </div> 
    </div> 
    </div> 
    <!-- Repeat from the div with clearL --> 
</div>

然後你看一下聲明這些類的，看看他們是如何協同工作：

.clearL { 
    clear:left; 
} 
.grid-view .video-cell { 
    display:inline-block; 
    vertical-align:top; 
} 
.feedmodule-data .grid-view .video-entry { 
    margin-bottom:5px; 
    margin-top:5px; 
} 
.grid-view .video-entry { 
    vertical-align:baseline; 
} 
.video-thumb-120 { 
    border:3px double #999999; 
    display:block; 
    overflow:hidden; 
    height:72px; 
    width:120px; 
} 
.grid-view .video-main-content { 
    overflow:hidden; 
    margin-top:2px; 
} 
/* Etc, etc - I feel dirty posting the whole thing here ;) 
    take a look at the source for yourself to see the rest */

來源

2010-03-08 09:00:45

好的，我會檢查，讓你通知你先生本傑姆duguid – 2010-03-08 10:07:07

雅是好的謝謝你先生本傑杜古德先生 – 2010-03-08 11:06:49

，則應該設置的圖像的<td>的寬度和標籤至90像素或也許有點寬等所以：

HTML：

<table> 
    <tr> 
     <td class="imageHolder"><asp:Image /></td> 
    </tr> 
    <tr> 
     <td class="captionHolder"><asp:Label /></td> 
    </tr> 
</table>

CSS：

td.imageHolder, td.captionHolder 
{ 
    width:95px; 
}

來源

2010-03-05 09:55:24

好的，我會嘗試並通知您以後，謝謝你的回覆 – 2010-03-05 10:27:31

雅它工作正常。但圖像是向上移動其他圖像r統一對齊，但具有較長標題的圖像向上移動不正確對齊 – 2010-03-05 10:52:34

在你管中他們如何對齊這個問題。即使標題太長或太短，圖像和標題也處於相同的對齊狀態 – 2010-03-05 11:21:53

相關問題