对齐图像旁边的文本列表

Question

我想创建一个类似于 Ebay 在 "List View" 中显示这些产品的方式的产品列表。它本质上是一个无序列表，其中图像显示在左侧（33% 宽度），title/subtitle/attributes/price 显示在右侧。

我尝试了在 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

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

Answer 2

我在为 eBay 和 Amazon 开发价格比较工具时遇到了同样的问题。我通过使用带有两个嵌套 div 的 div 来解决它，用于项目图像和项目规格。

Answer 3

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

*, 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">.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">.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 -->

对齐图像旁边的文本列表

Aligning list of text next to image

html

css

css-float

styling

text-alignment