html - 对齐图像旁边的文本列表

Question

我想创建一个类似于 Ebay 在“ ListView ”中显示这些产品的方式的产品列表。它本质上是一个无序列表，左侧显示图像(33% 宽度)，右侧显示标题/副标题/属性/价格。

我尝试了在 Stack Overflow 上找到的数十个示例，但收效甚微。我见过一些论点说将它向左浮动是最好的，而论点说 inline-block 是最好的。两者似乎都无法完全发挥作用，让我对如何实现这一目标感到困惑。

下面的代码片段得到了总体思路，但如果文本内容在垂直方向上比图像延伸得更远，它就会影响布局。列表项基本上应该像 display:block 一样工作，内部有 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>

所需的布局:

Answer 1

我做到了。检查代码但没有响应。你可以修改它。我希望这会有所帮助。

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