2

これが私の印刷ページの外観です。

ここに画像の説明を入力

これが私のhtmlの一瞥です、

<style>
    .container{
        float: left; 
        border: 1px solid Black; 
        width: 400px;
        height: 350px;
        margin: 10px;
        padding: 10px;
        page-break-inside: avoid;
    }
    .container img{
        max-width: 200px;
        max-height: 200px;
    }
</style>
<div class="container">
    <b>Name: </b>@Product.Name<br />
    <b>Model: </b>@Product.ModelNumber<br />
    <img src="@Product.ImagePath" /><br />
    <span style="font-size: 20px">DetailedDescriptions</span><br />
    @foreach(var attr in Product.DetailedDescriptions){
        @attr.Header<br />
    }
    <span style="font-size: 20px">KeyAttributes</span><br />
    @foreach(var attr in Product.KeyAttributes){
        @attr.Name<br />
        @attr.Value<br />
    }
</div>

CSSを使用して6 divごとに改ページすることを確認する方法

4

3 に答える 3

3

使用できます

div:nth-of-type(6n) {
    page-break-after:always;
}

各 6.div の後に改ページを挿入しますが、フロートでは機能しないと思います。

于 2013-07-17T11:41:14.747 に答える
1

あなたはこのようにすることができます：

フィドル

.wrapper div:nth-child(6n)
{
    margin-bottom: 300px;
}

つまり、コンテナ 6 個ごとに x px (必要なだけ) の下マージンを追加して、次のボックスを次のページにプッシュします。

于 2013-07-17T11:40:48.387 に答える