对齐图像旁边的文本列表

Question

我想创建一个产品列表，类似于Ebay在＆＃34;列表视图＆＃34;中显示的方式。它本质上是一个无序列表，左侧显示图像（宽度为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>

所需的布局：

Answer 1

您现在需要更好的代码。制作父div，然后div为图像，div为内容并在CSS中设置样式。现在，图像的宽度为33％，但内容的宽度不是，例如：h3，text。

Answer 2

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

＆＃13;

＆＃13;

*, 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);
}

＆＃13;

<!-- 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 -->

＆＃13;

＆＃13;

＆＃13;

Answer 3

当我为eBay和亚马逊开发价格比较工具时，我遇到了同样的问题。我使用带有两个嵌套div的{​​{1}}项目图片和商品规格解决了这个问题。