Выравнивание списка текста рядом с изображением

Я хочу создать список продуктов, аналогичный тому, как Ebay показывает их в «List View». Его по существу неупорядоченный список, где изображение показано слева (ширина 33%), а рядом с ним справа - заголовок/субтитры/атрибуты/цена.Выравнивание списка текста рядом с изображением

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

Следующий фрагмент получает общую идею, но если текстовое содержимое простирается вертикально дальше изображения, оно выбрасывает макет. Элемент списка должен по существу работать как отображение: блок с 2 столбцами внутри, 1 для изображения и 1 для текстового описания.

Пример кода:

<ul> 
    <li style="width:100%;display:flex;"> 
     <div style="width:33%;"> 
      <img src="http://thumbs.ebaystatic.com/images/m/m4JYJFjgp9rwTii4MicWiDA/s-l225.jpg"> 
     </div> 
     <div style="flex:1;"> 
      <ul> 
       <li><h3 class="title">This Is Some Type of Product Title</h3></li> 
       <li class="subtitle">This is a longer description text that appears smaller below it</li> 
       <li class="attr">Soft Wooly Cloth Fabric</li> 
       <li class="attr">Big Screen</li> 
       <li><span class="price" style="font-weight:bold;">9.99$</span></li> 
       <li class="attr">More Attributes</li> 
       <li class="attr">More Attributes</li> 
       <li class="attr">More Attributes</li> 
      </ul> 
     </div> 
    </li> 
</ul>

Желаемая Компоновка:

источник

2017-01-08 Anonymous

вы пытались сделать это, используя твиттер-загрузчик? – Banzay

я это сделал. Проверьте код, но не реагируйте. Вы можете изменить его, как можете. Надеюсь, это поможет.

*, html { 
 
\t padding: 0; 
 
\t margin: 0; 
 
} 
 
body { 
 
\t padding: 0; 
 
\t margin: 0; 
 
\t background: #fff; 
 
\t color: #000; 
 
\t font-size: 15px; 
 
\t font-family: Arial; 
 
} 
 
.clear { 
 
\t clear: both 
 
} 
 
#productbox { 
 
\t float: left; 
 
\t display: block; 
 
\t margin: 8px; 
 
    width: 794px; 
 
} 
 
.product { 
 
\t width: 100%; 
 
\t float: left; 
 
\t padding-bottom: 8px; 
 
    margin-bottom:10px; 
 
    border-bottom: 1px solid #e4e4e4; 
 
} 
 
.product:last-child { 
 
    border-bottom: none; 
 
} 
 
.product_img { 
 
\t float: left; 
 
\t width: 227px; 
 
\t height: auto; 
 
\t border-radius: 3px; 
 
\t border: 1px solid #e4e4e4; 
 
} 
 
.product_content { 
 
\t float: left; 
 
\t margin-left: 12px; 
 
\t width: 552px; 
 
\t text-align: left; 
 
} 
 
.product_title { 
 
\t float: left; 
 
\t margin-top: -2px; 
 
\t text-align: left; 
 
\t color: #0654ba; 
 
} 
 
.product_title a { 
 
\t font-weight: normal; 
 
\t font-size: 16px; 
 
\t color: #0654ba; 
 
\t text-decoration: none; 
 
} 
 
.product_title a:hover { 
 
\t text-decoration: underline; 
 
} 
 
.product_special { 
 
\t float: left; 
 
\t margin-top: 6px; 
 
\t font-size: 14px; 
 
\t color: #767676; 
 
} 
 
.product_info { 
 
\t float: left; 
 
\t margin-top: 10px; 
 
\t width: 275px; 
 
\t height: auto; 
 
\t background: #fff; 
 
} 
 
.product_price { 
 
\t float: left; 
 
\t font-size: 20px; 
 
\t font-weight: bold; 
 
\t color: #333; 
 
\t line-height: 1.1; 
 
} 
 
.price_info { 
 
\t float: left; 
 
\t margin-top: 4px; 
 
\t font-size: 13px; 
 
\t color: #767676; 
 
} 
 
.ship { 
 
\t float: left; 
 
\t margin-top: 6px; 
 
\t font-size: 13px; 
 
\t font-weight: bold; 
 
\t color: #333; 
 
} 
 
.sold { 
 
\t float: left; 
 
\t margin-top: 10px; 
 
\t font-size: 13px; 
 
\t font-weight: bold; 
 
\t color: #dd1e31; 
 
} 
 
.more_link { 
 
\t float: left; 
 
\t margin-top: 6px; 
 
\t font-size: 13px; 
 
} 
 
.more_link a { 
 
\t font-size: 13px; 
 
\t color: #0654ba; 
 
\t text-decoration: none; 
 
} 
 
.more_link a:hover { 
 
\t text-decoration: underline; 
 
} 
 
.additional { 
 
\t float: left; 
 
\t margin-top: 10px; 
 
\t width: 275px; 
 
\t height: auto; 
 
\t background: #fff; 
 
} 
 
.country { 
 
\t float: left; 
 
\t margin-top: 4px; 
 
\t font-size: 13px; 
 
\t color: #767676; 
 
} 
 
.other { 
 
\t float: left; 
 
\t margin-top: 6px; 
 
\t font-size: 13px; 
 
\t color: #767676; 
 
} 
 
.topseller { 
 
\t float: left; 
 
\t margin-top: 15px; 
 
\t width: 80px; 
 
\t height: 19px; 
 
\t background: url(http://s23.postimg.org/e7dqd4izf/top.png); 
 
}

<!-- start block --> 
 
<div id="productbox"> 
 

 
<!-- start product -->  
 
<div class="product"> 
 
<div class="product_img"><img src="http://thumbs.ebaystatic.com/images/m/m4JYJFjgp9rwTii4MicWiDA/s-l225.jpg"></div> 
 
<div class="product_content"> 
 
<div class="product_title"><a href="">NWT New Polo Ralph Loren Adjustable Strap Pony Logo Baseball Hat Cap 1 Size</a></div> 
 
<div class="clear"></div> 
 
<div class="product_special">Free Shipping ! 30 Day Warranty ! USA Seller</div> 
 
<div class="clear"></div> 
 
<div class="product_info"> 
 
<div class="product_price">$23.88</div> 
 
<div class="clear"></div> 
 
<div class="price_info">Buy It Now</div> 
 
<div class="clear"></div> 
 
<div class="ship">Free shipping</div> 
 
<div class="clear"></div> 
 
<div class="sold">4315 sold</div> 
 
<div class="clear"></div> 
 
<div class="more_link"><a href="#">See more like this</a></div> 
 
</div> 
 
<div class="additional"> 
 
<div class="country">From China</div> 
 
<div class="clear"></div> 
 
<div class="other">Customs services and international tracking provided</div> 
 
<div class="topseller"><div class=""></div> 
 
<div class="clear"></div> 
 
</div> 
 
</div> 
 
</div>   
 
</div> 
 
<!-- end of product --> 
 

 
<div class="clear"></div> 
 

 
<!-- start product -->  
 
<div class="product"> 
 
<div class="product_img"><img src="http://thumbs.ebaystatic.com/images/m/m4JYJFjgp9rwTii4MicWiDA/s-l225.jpg"></div> 
 
<div class="product_content"> 
 
<div class="product_title"><a href="">NWT New Polo Ralph Loren Adjustable Strap Pony Logo Baseball Hat Cap 1 Size</a></div> 
 
<div class="clear"></div> 
 
<div class="product_special">Free Shipping ! 30 Day Warranty ! USA Seller</div> 
 
<div class="clear"></div> 
 
<div class="product_info"> 
 
<div class="product_price">$23.88</div> 
 
<div class="clear"></div> 
 
<div class="price_info">Buy It Now</div> 
 
<div class="clear"></div> 
 
<div class="ship">Free shipping</div> 
 
<div class="clear"></div> 
 
<div class="sold">4315 sold</div> 
 
<div class="clear"></div> 
 
<div class="more_link"><a href="#">See more like this</a></div> 
 
</div> 
 
<div class="additional"> 
 
<div class="country">From China</div> 
 
<div class="clear"></div> 
 
<div class="other">Customs services and international tracking provided</div> 
 
<div class="topseller"><div class=""></div> 
 
<div class="clear"></div> 
 
</div> 
 
</div> 
 
</div>   
 
</div> 
 
<!-- end of product --> 
 

 
</div>  
 
<!-- end of block -->

источник

2017-01-08 14:02:13 bulldozer

Вам нужно код это лучше, то сейчас. Создайте родительский div, затем div для изображения, div для содержимого и стилей его в CSS. Теперь у вас ширина 33% для изображения, но не ширина для контента, например: h3, текст.

источник

2017-01-08 12:32:34 bulldozer

-2

У меня была такая же проблема, когда я разработал инструмент сравнения цен для eBay и Amazon. Я решил это, используя div с двумя вложенными div s для описания предметов и предметов.

price comparison tool for eBay and Amazon example

источник

2017-01-08 13:02:40

Выравнивание списка текста рядом с изображением

ответ

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