Question

在我的应用程序中，我正在显示图像（图像大小为90px宽度，90px高度），并且在我下面显示数据列表控件（水平显示）中的图像标题。我在源代码中使用了表（标签）。图像和标题将从数据库动态显示。我的问题是，当标题太长时，它会扰乱我的设计，当标题太长时它应该降下来，标题应该与图片大小相同，如果它太长则在第二行中降下来。

例如，下面是图像，下面是图像标题

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

上面的图片标题太长了。字母“rao”应排在第二行。

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

这是我想要的设计。我怎么才能得到它。这是我的源代码

'CommandName =“Play”CommandArgument ='＆lt;％＃Eval（“VideoName”）+“|”+ Eval（“videoid”）+“，”+ Eval（“username”）％＆gt;'宽度=“90px”高度=“90px”/＆gt;
'CommandName =“title”CommandArgument ='＆lt;％＃Eval（“VideoName”）+“|”+ Eval（“videoid”）+“，”+ Eval（“username”）％＆gt;'＆gt; “＆GT; “＆GT;

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

Answer 1

您应该将图片<td>的宽度和标签设置为90px，或者更宽一点：

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;
}

Answer 2

Web开发的一大优点是源代码可供所有人查看，查看并从中获取灵感。使用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 */

在asp.net中设计问题？

2 个答案: