Question

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

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

将浏览器尺寸更改为低于820px，您将看到响应式设计。这里的问题是我在数据和标题之间有一个奇怪的空间？我试图找到为什么有空间但没有运气？

这是该部分的简单标记：

<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行改变浮动：无到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

试试这个会解决你的问题在左右单元格后添加clear class并添加隐藏在.postContainer .rightPostCell class

中的流程

<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;
}

两个元素之间有多余的空间？

5 个答案: