问题为什么我的div重叠？

我正在尝试在列表元素中创建一个父div，其中包含左右两个子div。左边将包含一个图像，右边将包含两个包含一些文本和时间戳的附加div。

我不能让左右div显示而不重叠。

我的HTML看起来像这样：

<ul class="activity-comments">
<li>
<div style="border: solid 1px #ff0000;">
  <div style="float:left;border: solid 1px #0000ff;">
      <img src="http://localhost/new/img/sampleimg.png" class="thumb-small">
  </div>
  <div>
    <small>Some sample text here 1</small>
  </div>
  <div>
    <small>Posted 1 day ago</small>
  </div>
</div>
</li>
<li>
<div style="border: solid 1px #ff0000;">
  <div style="float:left;border: solid 1px #0000ff;">
      <img src="http://localhost/new/img/sampleimg.png" class="thumb-small">
  </div>
  <div>
    <small>Some sample text here 2</small>
  </div>
  <div>
    <small>Posted 2 days ago</small>
  </div>
</div>
</li>
</ul>

看看这个 的jsfiddle

我错过了什么？

4589

2018-04-15 14:35

起源

答案:

它们是重叠的，因为你是浮动一个div，但没有清除浮动。

使用clearfix方法清除浮动。添加一个类 container 到您的容器div并使用此CSS：

http://jsfiddle.net/57PQm/7/

.container {
    border: solid 1px #ff0000;
    zoom: 1; /* IE6&7 */
}

.container:before,
.container:after {
    content: "";
    display: table;
}

.container:after {
    clear: both;
}

您还会注意到我已删除了您的内联CSS。这使您的代码更易于维护。

2018-04-15 14:42

这不是世界上最糟糕的事情。这是一种非常常见的做法，但我确实在没有添加额外div的情况下阅读了如何做到这一点，但我不记得了。我现在要仔细查看。 - Travesty3

对于那些仍然像2000年而不是2013年那样编码的人来说，这是一种常见的做法。 codepen.io/cimmanon/pen/qDjdr - cimmanon

添加一个伪元素 clear:left|right 或使用 overflow 或者只是调整图像。 - Christoph

我修复了解决方案以使用clearfix并删除了内联css。而且你不必把我重新回到2000年...我很确定clearfix在至少像2007年之前并不常见。 - Travesty3

@Travesty3好，clearfixes最大的敌人，当然，IE6无法处理伪元素。从技术上来说，虽然XP在去年的支持下，但仍有一些人需要考虑这一点。我总是拿着 overflow 修复哪个非常可靠。 - Christoph

答案:

它们是重叠的，因为你是浮动一个div，但没有清除浮动。

使用clearfix方法清除浮动。添加一个类 container 到您的容器div并使用此CSS：

http://jsfiddle.net/57PQm/7/

.container {
    border: solid 1px #ff0000;
    zoom: 1; /* IE6&7 */
}

.container:before,
.container:after {
    content: "";
    display: table;
}

.container:after {
    clear: both;
}

您还会注意到我已删除了您的内联CSS。这使您的代码更易于维护。

2018-04-15 14:42

对于那些仍然像2000年而不是2013年那样编码的人来说，这是一种常见的做法。 codepen.io/cimmanon/pen/qDjdr - cimmanon

添加一个伪元素 clear:left|right 或使用 overflow 或者只是调整图像。 - Christoph

我修复了解决方案以使用clearfix并删除了内联css。而且你不必把我重新回到2000年...我很确定clearfix在至少像2007年之前并不常见。 - Travesty3

我想知道这是不是你想要的：的jsfiddle

我加入了 img{display:block;} 因为图像带有一些隐藏的填充物，可以将元素向下推。

2018-04-15 14:41

从技术上讲，它不是填充，而是与替换的内联元素的基线对齐 img。所以简单地设置 vertical-align 也会奏效。 - Christoph

您的缩略图将图片设置为41px的特定高度。更改图片大小，或更改div大小或设置外部div的溢出。

2018-04-15 14:42

你在哪里看到图像的额外填充？ - Paul

热门问题

不使用eval / new函数的JavaScript模板库当涉及内部类时，Java继承如何工作 .NET Windows服务的奇怪问题在.ipa或.app下查找App ID 快速入门XSLT参考[关闭] 如何找出Android应用程序中未使用的资源 Ruby中并发的同步方法[重复] 将std :: chrono :: system_clock :: time_point转换为struct timeval并返回 Google Drive API V3（javascript）更新文件内容 Bootstrap 3.0 - 将元素推到底部受密码保护的.NET ClickOnce部署？如何用postgresql安装wordpress coq Set或Type如何成为命题硒滚动元素进入（中心）视图在Spring Transaction JUnit测试中自动装配Hibernate会话的正确方法 Git的Dockerfile策略如何在FOS_PICKFOLDER中使用IFileDialog，同时仍在对话框中显示文件名在Firefox扩展中复制Google Chrome浏览器操作弹出效果 CakePHP找到MAX 芹菜 - 完成任务的召唤功能从使用fmemopen创建的流中读取宽字符 .NET是否为每个程序集创建一个字符串实习池？ DefaultModelBinder不绑定嵌套模型 Navigator.MediaDevices.getUserMedia（）使用了哪些相机通信标准？选择命名空间名称时应该知道什么？ cout Swagger Codegen CLI Java客户端 - 如何正确使用它一个很好的哈希函数用于采访整数，字符串？ Maven 3 ciManagement配置的目的是什么？如何通过语言文化获取代码页？

问题 为什么我的div重叠？

答案:

答案:

热门问题

问题为什么我的div重叠？