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

asp.net中的设计问题？

回答

相关问题