时间戳

首页 > 解决方案 > 浮动左元素和浮动右元素被标题（chrome）向上推

html - 浮动左元素和浮动右元素被标题（chrome）向上推

问题描述

我有一个向左浮动的 div，另一个向右浮动的 div 和一个在中间包含标题的 div，当页面变窄并且中间的 div 被向下推时，这是意料之中的，但它也将左右 div 推到了上方和在容器上，这是问题所在。

演示：https ://jsfiddle.net/3rnjq0vb/ ，需要调整预览大小才能看到问题

它似乎在边缘和火上按预期工作

.left {
    float: left;
    background-color: tomato;
    height: 50px;
    width: 200px;
}

.right {
    float: right;
    background-color: cyan;
    height: 50px;
    width: 700px;
}

.center {
    display: inline-block;
}

body {
    text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="center">
        <h2>Some-text</h2>
    </div>
</body>
</html>

标签： htmlcsscss-float

解决方案

您可以做的一件事是给中心元素一个特定的宽度 - 容器的宽度减去其他两个元素的宽度，并将其浮动。

width: calc(100% - 900px);

它需要设置一个最小宽度，否则当视口变窄时它将被压扁。

这是一个片段：

.left {
  float: left;
  background-color: tomato;
  height: 50px;
  width: 200px;
}

.right {
  float: right;
  background-color: cyan;
  height: 50px;
  width: 700px;
}

.center {
  display: inline-block;
  float: left;
  width: calc(100% - 900px);
  min-width: 150px;
}

body {
  text-align: center;
}
<body>
  <div class="left">left</div>
  <div class="right">right</div>
  <div class="center">
    <h2>Some-text</h2>
  </div>
</body>

对于响应速度更快的方法 - 例如，两侧元素的宽度会随着视口的变化而变化，您可以根据在较窄视口上想要的结果来研究网格或 flex。

推荐阅读