asp.net中的设计问题？

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

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

例如，下面是一张图片，下面是图片标题

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

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

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

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

'CommandName=“Play”CommandArgument=''Width=“90px”Height=“90px”/
'CommandName=“title”CommandArgument=''> '> '>

---

您应该将图像和标签的

宽度设置为90px或稍宽一点，如下所示：

HTML:

---

您应该将图像和标签的

宽度设置为90px或稍宽一点，如下所示：

HTML:

---

web开发的一大优点是，所有人都可以看到、查看源代码，并从中获得灵感。使用FireFox中的工具或InternetExplorer8中的开发人员工具使这一过程更加容易

打开要模拟的页面，并检查相关区域的代码。你会看到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>

---

web开发的一大优点是，所有人都可以看到、查看源代码，并从中获得灵感。使用FireFox中的工具或InternetExplorer8中的开发人员工具使这一过程更加容易

打开要模拟的页面，并检查相关区域的代码。你会看到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>

---

我正在使用类似于YouTube的表格，它们如何保持图像对齐。如果视频的标题太长，即使图像及其标题对齐方式相等，也可以使用“you tube”中的表格来保持图像对齐。如果视频标题太长，即使图像与其标题对齐相等，也可以正常工作。但是图像是向上移动的，其他图像是均匀对齐的，但是具有长标题的图像是向上移动的，没有正确对齐。在您的试管中，它们如何对齐这个问题。图像和标题对齐，即使标题太长或太短，请尝试使两个单元格垂直对齐：顶部；好的，我会试着让你告诉克里斯托夫·克莱斯先生谢谢你的回答。你可以发布问题的截图和一些HTML/CSS代码吗？是的，它工作得很好。但是图像是向上移动的，其他图像是均匀对齐的，但是具有长标题的图像是向上移动的，没有正确对齐。在您的试管中，它们如何对齐这个问题。图像和标题对齐，即使标题太长或太短，请尝试使两个单元格垂直对齐：顶部；在CSS中。好的，我会尝试让你通知克里斯托夫·克莱斯先生谢谢你的回答。你可以发布问题的截图和一些HTML/CSS代码吗？好的，好的，我会检查并让你通知你，扎夫·本·杜吉多克先生，我会检查并让你通知扎夫·本·杜吉德先生

.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 */