对齐图像旁边的文本列表

Question

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

我已经尝试了 Stack Overflow 上的几十个示例，但收效甚微。我已经看到有论点说它向左浮动是最好的，而论点说内联块是最好的。两者似乎都无法完全发挥作用，让我对如何实现这一点感到困惑。

下面的 sn-p 得到了大体的想法，但是如果文本内容垂直延伸比图像更远，它就会抛出布局。列表项本质上应该用作 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 -->

Answer 2

你现在需要更好的编码。创建父 div，然后 div 用于图像，div 用于内容并在 CSS 中设置样式。现在您有 33% 的图像宽度，但没有内容的宽度，例如：h3、文本。

Answer 3

当我为 eBay 和亚马逊开发价格比较工具时，我也遇到了同样的问题。我通过使用带有两个嵌套divs 的div 解决了这个问题，用于项目图像和项目规格。