0

私は次のHTML構造を持っています。これは、互いに下にあるビュー行の div の集まりです。div を 2 ごとに並べて配置したいと思います。

したがって、次のパターン

ビュー行 1 ビュー行 2 ビュー行 3 ビュー行 4 ビュー行 5 ビュー行 6

<div class="view view-toepassingen view-id-toepassingen view-display-id-page view-dom-id-5a6ac8323a7566e5f11218e7b6c49c5c">
    <div class="view-content">
    <div class="views-row views-row-1 views-row-odd views-row-first">
        <div class="views-field views-field-title">
        <div class="views-field views-field-body">
        <div class="views-field views-field-field-afbeeldingen">
    </div>
    <div class="views-row views-row-2 views-row-even">
    <div class="views-row views-row-3 views-row-odd">
    <div class="views-row views-row-4 views-row-even">
    <div class="views-row views-row-5 views-row-odd">
    <div class="views-row views-row-6 views-row-even views-row-last">
</div>

これまでのところ、私が持っている CSS:

#zone-content .views-row{
    padding: 20px 0 20px 0;
    width: 440px;
}
#zone-content .views-row img{
    max-width: 360px;
    max-height: 400px;
}

#zone-content .views-field-title {
    width: 400px;
    height:50px;
}

#zone-content .views-field-body {
    margin-top:70px;
    height: 290px;
    width: 400px;
}
4

2 に答える 2

1

display:inline-blockプロパティを CSS クラスに追加して確認でき#zone-content .views-rowます。

于 2013-06-27T05:46:22.463 に答える
0

これは、あなたの望むことですか？より明確に表示するために、 div間に少しマージンを追加しました。

.views-row {
    border: 1px solid;
    float: left;
    margin: 5px;
}
于 2013-06-27T05:46:15.893 に答える