Question

我第一次使用osCommerce。我继承了这段代码，我们想收紧new_products页面。这是显示的代码：

div class="contentText">
      <div class="NewProductsList">
      <table border="0" width="100%" cellspacing="0" cellpadding="2">
       <tr>
         <td style="border-bottom:solid 1px #ccc;">
            <div class="outer">
               <div id="x">
                 <a href="http://localhost/oscommerce-2.3.4/catalog/product_info.php?products_id=118"><img src="images/swords-sandals.jpg" alt="Swords, Sandals and Sirens" title="Swords, Sandals and Sirens" width="120" height="180" /></a>

                 <span class="name-font">
                   <a href="http://localhost/oscommerce-2.3.4/catalog/product_info.php?products_id=118">Swords, Sandals and Sirens</a>
                 </span>
                 <span class="price-font">$19.00</span>
                  <br /><br />
                  Murder, conmen, elephants.  Who knew ancient times could be such fun?
                  <br /><br />
                  Many of the stories feature Claudia Seferius, the
                  <a href="http://localhost/oscommerce-2.3.4/catalog/product_info.php?products_id=118"> ...read more</a>
               </div>
            </div>

然后这是我的样式表（css）代码：

<style>
.price-font {
 float: right;
 color: #000000;
 font-size: 18px; 
}   
.name-font {
 font-size: 14px;
 font-weight: bolder; 
}   
.outer {
    padding: 10px;
}
#x {
    display: inline-block;
}
#y {
    width: 82%;
    vertical-align: top;
    display: inline-block;
}       
.NewProductsList tr.alt td #x {
  float: right;
}
.NewProductsList tr.alt td {
  background-color: #ecf6fc;
}

我可以获得任何帮助来收紧文本，使其直接在图像旁边而不是在图像下面，我将不胜感激。

谢谢！

Answer 1

尝试将此添加到您的CSS：

#x > a {
float: left;
}

JSFiddle：https://jsfiddle.net/suomyone/h2j013dx/

基本上，这会针对产品链接（在本例中为图像）并将其浮动到左侧。结果，产品标题和描述向上移动，紧挨着图像。您必须使用边距或填充来实现图像和文本之间所需的间距。

这是你想要获得的效果吗？

聚苯乙烯。您的HTML缺少一些结束标记，特别是</td>，</tr>，</table>和两个</div>标记。我将这些添加到JSFiddle演示中。

移动图像旁边的文本

1 个答案: