Question

我正在尝试制作一些卡片，用于显示图像和一些有关我数据库中某些产品的信息。

http://i63.tinypic.com/2yjo712.png（由于某种原因，我不允许直接将图片上传到Stack。）

正如你所看到的，这些盒子并不是很好。我已经尝试搞乱通过内联编辑来构建每个卡片个体的div，以尝试解决此问题。

卡片是动态的，坐在一排总长500px的行中。我想在图片中占据35％的可用空间，以及卡片的主体（在标签下方）占用其余部分（减去标签占用的内容）。

我不知道如何做到这一点，我希望我知道更多的CSS技巧。任何人都可以帮我弄清楚如何让这些卡看起来更舒服吗？

另外，请注意，我正在使用Bootstrap。

（每个面板在当前状态下位于col-md-4内部，因此每行留下3张卡片）

$bootstrap_width = 4;
$amountCols = 12/$bootstrap_width;
$loop = 1;
//Loop through rows of database that apply....
while($row = $ret->fetchArray(SQLITE3_ASSOC) ){

    if($loop == 1) {
        echo "<div class='row' style='height:500px;overflow:hidden;'>";
    }

    echo "<div class='col-md-".$bootstrap_width."'>";
    ?>
    <div class="panel with-nav-tabs panel-default">
        <div class="panel-body" style="padding:0px;">
            <div class="tab-content">
                <img id='ShowImage' height='auto' width='100%' src='<?=$image;?>' />
            </div>
        </div>
        <div class="panel-heading">
                <ul class="nav nav-tabs">
                    <li class="active"><a href="#tab1default-<?=$row['uniqueID'];?>" data-toggle="tab">Info</a></li>
                    <li><a href="#tab2default-<?=$row['uniqueID'];?>" data-toggle="tab">Stock</a></li>
                    <li><a href="#tab3default-<?=$row['uniqueID'];?>" data-toggle="tab">Actions</a></li>
                </ul>
        </div>
        <div class="panel-body">
            <div class="tab-content">
                <div class="tab-pane fade in active" id="tab1default-<?=$row['uniqueID'];?>">Default 1</div>
                <div class="tab-pane fade" id="tab2default-<?=$row['uniqueID'];?>">Default 2</div>
                <div class="tab-pane fade" id="tab3default-<?=$row['uniqueID'];?>">Default 3</div>
            </div>
        </div>
    </div>
    <?
    echo "</div>";

    if($loop == $amountCols) {
        echo "</div>";
        $loop = 1;
    } else {
        $loop++;
    }

}

css卡大小调整以匹配同一行中的其他人

0 个答案: