1

我到处寻找答案，但我认为我没有以正确的方式提出问题。我有两列，但我需要将元素堆叠起来，似乎无法使任何工作。我还想添加背景颜色以使元素脱颖而出。

<style type="text/css">
#showcase {
    width: 100%;
    margin-bottom: 20px;
    margin-top: 4px;
    vertical-align:top;
}
    #showcase > div {
        width: 280px;
        float: left;
        border: 1px solid #ddd;
        padding: 5px;
        vertical-align:top;
        margin-left: 0px;
    }
        #showcase > div:first-child {
            margin-left: 0;
            vertical-align:top;
        }
        #showcase > div > div {

            float: right;
            margin-left: 8px;
            vertical-align:top;
            font: 12px arial, sans-serif;
        }
        #showcase > div > img:last-child {
            width: 150px;
            clear: both;
            margin-top:16px;
            margin-left:0px;
            vertical-align:top;
        }
img.floatLeft { 
float: left; 
margin: 4px; 
}
img.floatRight { 
float: right; 
margin: 4px; 
}

</style>


<div class="module" style="margin-top:0px;">
<div class="module-header"><h3>Product Spotlight</h3></div>
</div>
<div id="showcase">



<? while($row = mysql_fetch_array($products_showcase_query)): ?>

    <div>
        <span style="display: block;font-size:20px;line-height:        130%;margin-bottom:4px;"><?=              $row['product_headline'] ?></span>


        <img src="../product_images/<?= $row['product_image'] ?>" style="width: 134px; float: left;" />

        <div><div class="floatLeft">
            <?= $row['product_summary'] ?>
        </div></div>

        <img src="../product_logos/<?= $row['product_logo'] ?>" />

    </div>

<? endwhile ?>
<span style="display: block;clear:both;"></span>
    </div>

布局示例

任何帮助，将不胜感激！谢谢 ：）

4

0 回答 0