画像の隣にテキストのリストを整える

"リストビュー"でEbayが表示する方法と同様の製品のリストを作成したいと思います。基本的には、画像が左側（33％幅）に表示され、タイトル/サブタイトル/属性/価格が右側に表示されている順番のないリストです。画像の隣にテキストのリストを整える

私は、Stack Overflowで見つかった数多くの例を試してみましたが、ほとんど成功しませんでした。私はそれを残しておくことが最善であり、インラインブロックが最善であるという議論を見てきました。いずれもどちらも完全に機能していないようで、私はこれをどのように達成するかについて混乱しています。

次のスニペットは一般的な考え方ですが、テキストの内容が画像よりも垂直方向に伸びている場合は、レイアウトから逸脱します。リスト項目は本質的にディスプレイとして機能するはずです：ブロックは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