Question

我创建了自己的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;
}

提前致谢（：

Answer 1

也许您应该尝试将display属性设置为inline-block而不是float：left。

Answer 2

在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）

Answer 3

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

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

.container {
    overflow: hidden;
}

这样做应该使所有父元素增长ij高度并容纳它的浮动子元素而不会破坏布局。

样式化图像容器

3 个答案: