CSS: показать изображение и div рядом друг с другом в элементе списка

Question

Когда я отправился этим утром, задача казалась простой: создать список элементов; каждый элемент состоит из миниатюры, заголовка и вложенного заголовка.

Я бы хотел, чтобы изображение было выровнено по левому краю с заголовком и подзаголовком рядом с ним. Если вы посмотрите на страницу с видео на YouTube: поле Похожие видео имеет похожий макет.

ОБНОВЛЕНИЕ: Если быть более точным: я пытаюсь создать макет из двух столбцов: изображение слева, текст справа. Некоторые из предложенных решений приводят к обтеканию текста вокруг изображения.

Вот структура HTML:

<ul>
  <li><img src="one.jpg"><div class="content">Title<br>sub-title</div></li>
  <li><img src="two.jpg"><div class="content">Another Title<br>sub-title</div></li>
</ul>

Без CSS текст отображается под изображением. Я пробовал много вещей, float: оставил на изображении и / или div. Ничего не помогло.

Самым близким, что я получил, был параметр float: left для тега img . Но затем второй пункт списка был втянут в середину первого.

Я выбрал неправильный подход? Нужно ли структурировать HTML по-другому?

Спасибо! Марк.

Answer 1

Поместите img внутрь div, тогда вы можете использовать его. Затем очистите поплавок, например, используя br:

 <li><div class="content"><img src="one.jpg">Title<br>sub-title</div><br style="clear:both"></li>

CSS:

 .content img {float:left}

Еще лучше, полностью избавиться от div (вы можете напрямую ввести li) и использовать h2 и h3 для заголовков (чтобы сохранить семантику разметки).

Answer 2

Вы можете дать каждому <li> класс и применить

background url(image path) no-repeat;

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

Answer 3

Представления, связанные с YouTube, используют DIV, а не комбинации UL> LI. Вот клочок их разметки:

<div class="video-entry ">
        <a class="video-thumb-90" href="/watch?v=z-ze42I6NEo&amp;feature=related">
<img alt="Hereford Utd v Newcastle Utd 5 Feb 1972 (Hereford Utd Goals)" qlicon="z-ze42I6NEo" class="vimg90" src="http://i3.ytimg.com/vi/z-ze42I6NEo/default.jpg" title="Hereford Utd v Newcastle Utd 5 Feb 1972 (Hereford Utd Goals)"><button onmousedown="yt.analytics.urchinTracker('/Events/VideoWatch/QuickList+AddTo')" onmouseout="yt.www.watch.quicklist.mouseOutQuickAdd(this)" onmouseover="yt.www.watch.quicklist.mouseOverQuickAdd(this)" onclick="return yt.www.watch.quicklist.onQuickAddClick(this, this.getAttribute('ql'), 'http://i3.ytimg.com/vi/z-ze42I6NEo/default.jpg', 'Hereford Utd v Newcastle Utd 5 Feb 1972 (Hereford Utd Goals)')" class="master-sprite QLIconImg addtoQL90" title="Add Video to QuickList" ql="z-ze42I6NEo"></button><span style="display: none;" class="quicklist-inlist">Added to <br> Quicklist</span><span class="video-time"><span>0:45</span></span></a>
        <div class="video-main-content">
            <div class="video-mini-title"><a rel="nofollow" title="Hereford Utd v Newcastle Utd 5 Feb 1972 (Hereford Utd Goals)" href="/watch?v=z-ze42I6NEo&amp;feature=related">Hereford Utd v Newcastle Utd 5 Feb 1972 (Herefo...</a></div>
            <div class="video-view-count">73,309 views</div>
            <div class="video-username"><a href="/user/Boney1960">Boney1960</a></div>

        </div>
        <div class="video-clear-list-left"></div>
    </div>

Если вы хотите скопировать эффект, который вы видите, просто изучите HTML-код документа. Это довольно просто сделать.

Answer 4

Попробуйте <span> вместо <div>. Span встроенный, а div в штучной упаковке. (Есть и другие вещи, которые вы можете сделать, чтобы сделать div встроенным, но я ожидаю, что они сломают остальную часть вашей страницы.)