html - 2个元素之间奇怪的额外空间？

Question

我尝试为网站构建响应式设计，但遇到了问题。

访问此页面：http ://test.ufeed.se/

将浏览器大小更改为 820 像素以下，您将看到响应式设计。这里的问题是我在数据和标题之间得到了一个奇怪的空格？我试图找出为什么有一个空间但没有运气？

这是零件的简单标记：

<div class="rightPostCell">
        <div class="titleCon">
            <div class="linkIcoCon">
               ...
            </div>
            <div class="floatLeft">
               ...
            </div>
        </div>
        <div class="data dimText">
            <div class="commentsCon">
                ...
            </div>
            <div style="clear:both;"></div>
            <div class="createdDateCon">
                ...
            </div>
            <div style="clear:both;"></div>
            <div class="baseLinkCon">
                ...
            </div>
        </div>
    <div style="clear:both;"></div>
    </div>

为什么标题和数据之间有空格？以及如何删除它？

Answer 1

看起来这是个float问题（我发现每次使用时都会出现问题float，通常我更喜欢它，display: inline-block因为它引入了更少的奇怪错误） - 如果我禁用clear: both数据，它就会正确到位。

Answer 2

你的 PostList.css 添加第 37 行overflow:auto

在 mobile.css 第 80 行将 float:none 更改为clear:both

之后需要添加一些边距，但它会删除发生的空间。

Answer 3

您需要对mobile.css文件进行的更改

.postContainer .titleCon{
   overflow:hidden; /* ADD this property */
}

.postContainer .data{
   overflow:hidden; /* ADD this property */
   clear:both; /* REMOVE this property */
}

Answer 4

试试这个，它会解决你的问题在左右单元格之后添加清晰的类并添加隐藏在 .postContainer .rightPostCell类中的溢出

<div class="postContainer">
      <div class="leftPostCell">data</div>
      <div class="rightPostCell">data</div>
      <div style="clear:both;"></div>
    </div>

.postContainer .rightPostCell {margin-left: 123px;overflow: hidden;}

Answer 5

有很多解决方案。这是一个：

mobile.css 第 80 行

.postContainer {
  width: 100%;
  padding: 3px;
  float: left;
}

PostList.css 第 37 行

.postContainer .rightPostCell {
  float: left;
}