У меня есть элемент на этой веб-странице, которую я разрабатываю, где мне нужно, чтобы мой текст соответствовал ширине изображения над ним - ширина которого всегда будет отличаться - подумайте о заголовках. Я нашел множество ссылок на использование таблицы в 1px для принудительного изменения размера. У меня проблемы, хотя Safari и Chrome «видят» эту инструкцию - текст заканчивается как текстовое поле небольшого размера, расположенное позади изображения.
Проблема, на мой взгляд, связана с текстом и изображениями, расположенными в div, вложенном в таблицу. Мне нужно, чтобы изображения помещались в div из-за какого-то скрипта jQuery, который я использую называемый цикл, который превращает группу изображений в слайд-шоу. Проблема может иметь отношение и к сценарию. В любом случае, я пробовал кажущееся бесконечное количество комбинаций плавающего влево и очищения влево на всех всех элементах div, изменения их положения и ширины ... ничего не работает. У кого-нибудь есть какие-либо подсказки о том, как протянуть этот вопрос?
РЕДАКТИРОВАТЬ 1: хорошо, я должен редактировать свое сообщение или отвечать с ответами?
Вот URL-адрес, чтобы увидеть мою проблему - http://friedmanstudios.ca/webdev/test8.html
и код:
<div id="content" class="boxes">
<table>
<tr>
<td >
<div id="imageFrame"> <a href="#" class="img" title="_MG_9786_fmt.jpeg"> <img src="images/_MG_9786_fmt.jpeg"/> </a> <a href="#" class="img" title="IMG_5169_fmt.jpeg"> <img src="indesign export/GFA-TEARSHEETS-100526-01-web-images/IMG_5169_fmt.jpeg"/> </a> <a href="#" class="img" title="IMG_5175_fmt.jpeg"> <img src="indesign export/GFA-TEARSHEETS-100526-01-web-images/IMG_5175_fmt.jpeg"/> </a> <a href="#" class="img" title="aerial_fmt.jpeg" width=""> <img src="indesign export/GFA-TEARSHEETS-100526-01-web-images/aerial_fmt.jpeg"/> </a> </div>
<div id="cycleCtrl">
<div id="prev" class="pager"><a href="#">< Prev</a> </div>
<div id="next" class="pager"><a href="#">Next ></a></div>
<div id="pagerNav" class="pager"></div>
</div>
<div id="descController">
<img src="images/arrow.gif" name="arrow" width="5" height="10" id="arrow" /> <span id="projectName">Toronto Centre for the Arts </span> <br />
<div id="desc"> In the past eight years...
</div>
</div></td>
<td width="90%"><!--push col 1 back--></td>
</tr>
</table>
и стили:
#content {
position: absolute;
top: 250px;
left: 275px;
float: left;
clear: both;
}
#content table {
float: left;
width: 1px;
}
#imageFrame {
position: relative;
float: left;
clear: left;
width: inherit;
}
#desc {
position: relative;
clear: left;
float: left;
}
#descController {
position:relative;
padding-top:5px;
padding-bottom:10px;
clear: left;
float: left;
}
#descController div {
height:0;
overflow:hidden;
-webkit-transition:all .5s ease;
-moz-transition:all .5s ease;
-o-transition:all .5s ease;
transition:all .5s ease;
padding-top:10px;
margin-top: 10px;
word-spacing: 0em;
line-height: 16px;
font-size: 12px;
position: relative;
float: left;
clear: left;
}