Question

http://codepen.io/leongaban/pen/talGc/

这里有一个有趣的问题。

我有一个左右div

左边的div有3个元素：

1）人1 2）想要签字 3）人2

右边的div只是一个段落，两个div的宽度都接近50％。

现在，如果缩小浏览器窗口，左侧div内的项目将开始换行。如果我确切地知道左边div中的内容总是多宽，这不会有问题，我可以用媒体查询来解决它。

所以这是我的问题，左边div中的元素将始终改变，所以我找不到完美的媒体查询来打破并移除浮动。

我相信我可以通过计算左div中所有元素的宽度来解决jQuery中的这个问题，并检查它是否与窗口调整大小的容器宽度匹配，然后删除浮点数。然而，这似乎做得太多，并且使用太多来解决这个问题。

是否有CSS解决方案？

我的所有代码都在上面的CodePen链接中，这是我用来删除1205px浮点数的mediaQuery。但是，由于宽度会发生变化，我永远不会知道每次都要打破的正确尺寸：

@media all and (max-width: 1205px) {
  .the_requestor, .the_requested, .wants_to_meet {
      float: none;
  }

  .the_requestor {
        margin: 0 0 10px 0;
  }

  .request_details_left {
        margin-top: 0;
        border-right: 1px solid #e0e0e0;
  }

  .request_details_right {
      width: 40%;
      border: 0;
  }
}

截图：
大桌面 - 正确的外观 enter image description here

调整窗口大小 - 有问题的外观（这是我想要避免的） enter image description here

调整大小的桌面 - 正确的外观 enter image description here

Answer 1

变化：

.request_details_left,
.the_requestor,
.wants_to_meet,
.the_requested,
.request_details_right {
      float: left;
}

要

.request_details_left,
.request_details_right {
      float: left;
}


.the_requestor,
.wants_to_meet,
.the_requested {
  display: inline-block;
  vertical-align: middle;
}

Answer 2

也许缩放是一种选择？见 CODEPEN

我添加了一个模拟调整窗口大小的滑块。我修改了某些css元素以在em中调整大小，并将正文中的主要字体大小设置为16px。滑块连接到一些jquery，操纵字体大小，进而缩放以em为单位测量的所有内容。

不确定缩放是否是一种选择，但也许您可以找到一种方法将其与您的问题联系起来

Answer 3

http://codepen.io/leongaban/pen/talGc/

找到方法:)左边div中的元素我必须给它们一个特定的设置宽度。然后去掉它们上面的花车。

@media all and (max-width: 1205px) {
    .the_requestor, .the_requested, .wants_to_meet {
        float: none;
        background: orange;
    }

    .the_requestor {
        margin: 0 0 10px 0;
    }

    .request_details_left {
        margin-top: 0;
        border-right: 1px solid #e0e0e0;
    }

    .request_details_right {
        width: 40%;
        border: 0;
    }

    .the_requestor,
    .the_requested,
        .wants_to_meet {
        float: none;  
        width: 100%;
    }
}

如何删除浮动因此只有在此Codepen中项目不包含CSS

3 个答案: