0

我已经创建了自己的 CMS，但我的图像概览仍然一团糟。目前它看起来像这样：发生：http: //i47.tinypic.com/raaybt.jpg

我正在努力实现这个结果（用photoshop制作这张照片） 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 属性设置为 inline-block 而不是 float : left。

于 2013-02-19T10:47:17.253 回答
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 添加一个属性以删除项目符号

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

或者只是你可以使用

overflow: hidden;对于父元素（即 UL）

于 2013-02-19T10:45:36.210 回答
0

我认为您只需要清除设计中的浮动图像元素即可。

最简单的方法是向父级添加溢出属性，例如

.container {
    overflow: hidden;
}

这样做应该使所有父元素增加 ij 高度并在不破坏布局的情况下容纳它的浮动子元素。

于 2013-02-19T10:48:53.603 回答