Desigining проблема в asp.net?

В моем приложении я показываю изображение (размер изображения составляет 90 пикселей, высота 90 пикселей), а ниже я показываю заголовок изображения в элементе управления списком данных (горизонтальный дисплей). Я использовал таблицу (теги) в исходном коде. изображение и название будут отображаться динамически из базы данных. моя проблема в том, что заголовок слишком длинный, это мешает моему дизайну, когда заголовок слишком длинный, он должен спуститься, заголовок должен иметь тот же размер, что и изображение, если он слишком длинный, чтобы он опустился во второй строке.Desigining проблема в asp.net?

, например, ниже это изображение, и ниже этого заголовка изображения

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

выше заголовка изображения слишком долго. буквы «rao» должны появиться во второй строке.

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

Это желание, которого я хочу. как я могу это получить. это мой исходный код

'Имя_команды = "Play" CommandArgument =' <% # Eval ("VideoName") + "|" + Eval ("VideoID") + "" + Eval ("имя пользователя")%>»Ширина = "90px" Height = "90px"/>
'Имя_команды = "название" CommandArgument =' <% # Eval ("VideoName") + "|" + Eval ("videoid") + "," + Eval ("username")%> '> '> '>

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

источник

2010-03-05 Surya sasidhar

Я использую таблицу как

–

в вашей трубке, как они могут поддерживать выравнивание изображения. если заголовок видео слишком длинный, хотя изображение и его выравнивание по выровнению равно –

ответ

Одна из больших вещей о веб-разработки является то, что исходный код доступен для всех, чтобы видеть, смотреть, и черпать вдохновение. Использование таких инструментов, как FireBug в FireFox или средствах разработчика в Internet Explorer 8, делает это еще проще.

Откройте страницу, которую вы хотите подражать, и проверьте код вокруг рассматриваемых областей. Вы увидите, что YouTube не использует таблицы, а divs и 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

ok nice я проверю и позволю вам сообщить вам г-н Жаф-бен duguid –

ya это нормально спасибо Mr. Zhaph-Ben Duguid –

Вы должны установить ширину <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

ok, я попытаюсь сообщить вам позже спасибо за ответ –

ya он работает нормально. но изображение перемещается вверх по другим изображениям, равномерное выравнивание, но изображение, которое имеет длинный заголовок, движется вверх не в правильном выравнивании –

в трубке, как они могут выровнять эту проблему. изображение и заголовок находятся в одном и том же выравнивании, даже заголовок слишком длинный или слишком короткий –

Смежные вопросы