Question

我有这个div显示电子商务网站的产品。

我已经将它与css和一个表格内部联系好了，但是使用表格内容似乎不赞成/不是最好的所以我正在努力做到这一点，到目前为止还没有成功。产品div看起来像这样：

原始未经编辑的截图：http://img255.imageshack.us/img255/6832/printt.png

这就是我想要的样子。我尝试在产品div中嵌套2个div，一个浮动右边的图像，标题和描述，另一个浮动右边的表格元素。

以为我在某些页面上看起来很不错，但在其他页面上（显示其他产品）它看起来不同而且搞砸了。我认为这是因为链接占据了整个产品div的宽度，最终超过了正确的div。

我如何阻止这种行为，我希望链接环绕文本可能问题就会消失。或者你在暗示其他什么？

HTML看起来像这样：

<div id="products">
        <a href="detalii.php?id_produs=4"><img src="fetch.php?id=4" width="129" height="129" alt="PRC200" /></a>
        <a href="detalii.php?id_produs=4"><h3>PRC200</h3></a>
        <table border="0">
        <tr>
            <td><h4>100,00 RON</h4></td>
        </tr>

        <tr>

            <td class="out">Indisponibil</td>
        </tr>

        <form action="" method="post">
        <tr>
            <td><input type="image" src="images/button_basket.jpg" name="submit_cos" width="118" height="25" /></td>
        </tr>
        </form>
        <form action="detalii.php" method="get">

        <tr>
            <td>
            <input type="hidden" name="id_produs" value="4" />
            <input type="image" src="images/button_details.jpg" name="submit_detalii" width="118" height="25" />
            </td>
        </tr>
        </form>
        </table>
        <a href="detalii.php?id_produs=4"><p>M-am saturat de atatea litere si numere</p></a>    
        </div>

Answer 1

这是一个无表格的解决方案。请记住将标记放在外部CSS文件中。通过使用无表结构，您将看到代码的浓缩程度。

<style>
.product { border:1px solid red; padding:10px; }
.productimg { float:left; padding-right:15px; }
.purchasedetails { float:right; padding-left:15px; }

</style>        
<div id="products">
    <div class="product">        
        <div class="purchasedetails">
            <h4>100,00 RON</h4>
            <p>Indisponibil</p>
            <input type="image" src="images/button_basket.jpg" name="submit_cos" width="118" height="25" /><br />
            <input type="image" src="images/button_details.jpg" name="submit_detalii" width="118" height="25" />
        </div>

        <div class="productimg"><a href="#"><img src="fetch.php?id=4" width="129" height="129" alt="PRC200" /></a></div>

        <h3><a href="#">PRC200</a></h3>
        <p class="description">Insert Description Here</p>
        <div style="clear:both;"></div>

    </div> 
</div>

我只在<div id="products">内部有这个，因为它列在你的代码中。无论是<td>还是<div>

，内部产品div都会自动填充它所放置的任何内容区域

在多元素div中对齐

1 个答案: