0

独自の CMS を作成しましたが、画像の概要がまだめちゃくちゃです。現在、次のようになっています: http://i47.tinypic.com/raaybt.jpg

私はこの結果を達成しようとしています (この写真はフォトショップで作成しました) http://i47.tinypic.com/30ualbm.jpg

上に投稿した結果をどのように達成できますか? ここに私のHTMLコードがあります:

                   <div id="main-content">
                   <div class="tab-content default-tab" id="tab1">
                        <div class="notification information png_bg">
                            <a href="#" class="close"><img src="resources/images/icons/cross_grey_small.png" title="Close this notification" alt="close" /></a>
                            <div>
                                Hieronder ziet u een overzicht van alle afbeeldingen die momenteel geupload zijn.
                            </div>
                        </div>

                        <div id="afbeeldingen">
                            <ul id="afbeeldingenlijst">
                                <li>
                                    <div class="afbeelding">
                                        <img src="http://placehold.it/150x150"/>
                                        <a href="#">Verwijderen</a>
                                    </div>
                                </li>

                                <li>
                                    <div class="afbeelding">
                                        <img src="http://placehold.it/150x150"/>
                                        <a href="#">Verwijderen</a>
                                    </div>
                                </li>
                            </ul>
                        </div>

                    </div></div>

ここに私のcssがあります:

#main-content ul li {
    width:200px;
    float: left;
}

前もって感謝します (:

4

3 に答える 3

1

おそらく、display プロパティを float : left ではなく inline-block に設定する必要があります。

于 2013-02-19T10:47:17.253 に答える
0

デザインにあるフローティング画像要素をクリアするだけでよいと思います。

これを行う最も簡単な方法は、オーバーフロー プロパティを親に追加することです。

.container {
    overflow: hidden;
}

これを行うと、すべての親要素が ij の高さまで成長し、レイアウトを壊すことなくフローティングの子に対応する必要があります。

于 2013-02-19T10:48:53.603 に答える
0

UL 内では要素がフロートされ、親要素の高さが 0px になるため、この css をスタイル シートに追加するには、そのフロートをクリアする必要があります。

    .clearfix {
      *zoom: 1;
    }

    .clearfix:before {
      display: table;
      content: "";
    }

    .clearfix:after {
      display: table;
      content: "";
      clear: both;
    }

and <ul class="clearfix">...</ul>

このクラスは、その要素の内部に浮動要素を持つすべての親要素に使用します (必要な場合)。

また、箇条書きを削除するために、既存のプロパティを使用して LI にプロパティをもう 1 つ追加します。

li{
  ...
  ...
  list-style:none;
}

または、単に使用できます

overflow: hidden;親要素 (つまり UL) の場合

于 2013-02-19T10:45:36.210 に答える