1

下の画像をご覧ください。左側の画像の間の空白を削除しようとしています。各画像はdivタグに含まれています。私のCSSは画像の後にあります。

これらのdivタグを並べて表示しようとしています

div.Forum {
    border: 2px solid black;
    text-align: center;
    padding: 0 36px;
}

div.Forum div 
{
  display: inline;
  float: left;
  clear: none; 
}

div.ForumChild 
{
    border: 1px solid black;
    background-color: #F2F2F2;
    width: 228px;
    height:auto;
    padding: 12px 12px 10px 10px;
    margin: auto auto;    
    margin-bottom: 10px;
    margin-right: 20px;
    overflow: hidden;
}

div.ForumChild img {
    width: 226px;
    height: auto;
    border: 1px solid black;
    float: left;
    border-radius: 2px;

}

Forumクラスは親であり、ForumChildクラスは各画像に使用されます。これがHTMLです。RazorViewで作成されます。

<div class="Forum">
    <p>The Forum</p>
            @foreach (var item in Model)
            {                                
                    <div class="ForumChild">                   
                      <img src="@item.Blog.Image.img_path" alt="Not Found" />

                      <br />

                    </div>
            }
</div>

前もって感謝します。

問題を解決するために、コードを次のように更新しました。みんな、ありがとう！

@{
    ViewBag.Title = "Home Page";
    int counter = 0;   
}


<div class="Forum">
    <p>The Forum</p>
        @for (int z = 0; z < 3; z++)
        {
            counter = 0;
            <div class="ForumChild">
                @foreach (var item in Model)
                {
                    if (counter % 3 == z)
                    {
                        <img src="@item.Blog.Image.img_path" alt="Not Found" />

                    }
                    counter++;
                }               
            </div>
        }
</div>
4

1 に答える 1

1

必要に応じて画像間のすべての空白を削除するには、機能しfloatません。3つの列 <div>タグを作成し、それらの列内に画像を配置できます。たとえば、3つの列が必要な場合：

HTML：

<div class="imgCol">
    <!-- every third image -->
</div>
<div class="imgCol">
    <!-- every third image -->
</div>
<div class="imgCol">
    <!-- every third image -->
</div>

float: left;次に、列クラス（この場合）のCSSに追加し.imgCol、幅とマージンが列が並んで表示され、フロートドロップが発生しないようにします。

これがデモです：http：//jsfiddle.net/yLRWK/

特定の状況では、これを次のように実装できます。ASP.netでコーディングしていないので、いくつかの擬似コードがスローされます

<div class="Forum">
    <p>The Forum</p>
    <div class="imgCol">
        /* create counter = 0 */
        @foreach (var item in Model) {                           
            /* if counter % 3 == 0, then write img tag */     
            <img src="@item.Blog.Image.img_path" alt="Not Found" />
            /* counter++ */
        }
    </div>
    <div class="imgCol">
        /* create counter = 0 */
        @foreach (var item in Model) {                           
            /* if counter % 3 == 1, then write img tag */     
            <img src="@item.Blog.Image.img_path" alt="Not Found" />
            /* counter++ */
        }
    </div>
    <div class="imgCol">
        /* create counter = 0 */
        @foreach (var item in Model) {                           
            /* if counter % 3 == 2, then write img tag */     
            <img src="@item.Blog.Image.img_path" alt="Not Found" />
            /* counter++ */
        }
    </div>
</div>

画像を3回ループする必要のないより良い解決策があるかもしれませんが、それはASP.netをよく知っている人に任せるのが最善です。

于 2012-08-06T15:55:29.090 に答える