Question

对于图形效果，我正在尝试创建一个具有特定宽度（800或1000像素）的div，其被2个相同大小的流体div包围。

左侧div为绿色，中间div为白色，包含左对齐徽标图像，以相同的绿色开始，右侧div为白色。中间div应始终居中。

有没有一种使用CSS的好方法？否则，有什么其他干净的外观和浏览器友好的方法吗？

编辑（x2）我当前的测试文件：

这样可行，但右边的div与中心div重叠，我更喜欢左边和右边的div正好是剩余的宽度，而不是在中心div下面（如果我想稍后做类似的事情））

<html>
<head>
<style>
  .header {
    width: 100%;
    height: 60px;
    background-color: grey;
  }
  .headercontents {
    width: 800px;
    height: 60px;
    display: inline-block;
    background-color: red;
    float: left;
    z-index: 99;
  }
  .left {
    display: inline-block;
    background-color: green;
    height: 60px;
    width: 49%;
    margin-right: -400px;
    float: left;
    z-index: 1;
  }
  .right {
    display: inline-block;
    height: 60px;
    background-color: blue;
    width: 49%;
    margin-left: -800px;
    float: right;
    z-index: 1;
  }
</style>
<div class="header">
  <div class="left"></div>
  <div class="headercontents"></div>
  <div class="right"></div>
</div>

代码与JavaScript完美配合：

<html>
<head>
<style>
  BODY {
    padding: 0;
    margin: 0;
  }
  .header {
    width: 100%;
    height: 60px;
    background-color: grey;
  }
  .headercontents {
    width: 800px;
    height: 60px;
    display: inline-block;
    background-color: red;
    z-index: 99;
  }
  .left {
    height: 60px;
    display: inline-block;
    background-color: green;
    z-index: 1;
  }
  .right {
    height: 60px;
    display: inline-block;
    background-color: blue;
    z-index: 1;
  }
</style>
</head>
<body>
<div class="header">
  <div class="left edge"></div><!--
  --><div class="headercontents"></div><!--
  --><div class="right edge"></div>
</div>
<script>
var leftEle = document.body.querySelector(".left");
var rightEle = document.body.querySelector(".right");

window.onresize = function() {
    var width = window.innerWidth || document.documentElement.clientWidth;
    if (width > 800) {
      var lrWidth = width / 2 - 400;
      leftEle.style.display = 'inline-block';
      rightEle.style.display = 'inline-block';
      leftEle.style.width = lrWidth;
      rightEle.style.width = lrWidth;
    } else {
      leftEle.style.display = 'none';
      rightEle.style.display = 'none';
      // It would be nice to scroll the page horizontally to the center here
    }
}
window.onload = window.onresize;
</script>
</body>
</html>

Answer 1

如果您在每个float:left上使用display:inline-block和div，也许。看看它是如何工作的。

Answer 2

尝试创建一个包装器并将3个div嵌套在里面。

例如：

<div class="wrapper">
    <div id="leftDiv"> div content </div>
    <div id="centerDiv"> div content </div>
    <div id="rightDiv"> div content </div>
</div>

Answer 3

我认为你最好使用javascript来达到特定的效果。如果没有给出宽度，则根据内容填充浮点和内联块。

var leftEle = document.body.querySelector(".left");
var rightEle = document.body.querySelector(".right");


window.onresize = function() {
    var width = window.innerWidth || document.documentElement.clientWidth;
    var lrWidth = width / 2;
    leftEle.style.width = lrWidth;
    rightEle.style.width = lrWidth
}

我可能会尝试使用流媒体设计（使用布局上的百分比）与媒体查询混合使文档在不同的屏幕尺寸下正确显示。

Answer 4

最简洁且问题较少的方法是在html代码中注释掉子元素之间的空格，并在子元素上使用属性display: inline-block，这样它们就能显示内联而不会破坏布局：

<div class="billboard grid">
    <div class="grid__item"></div><!--
    --><div class="grid__item"></div><!--
    --><div class="grid__item"></div>
</div>

然后使用css :nth-child(n) psudo-selector根据您的需要手动设置属性

.grid {
    width: 100%;
    overflow: hidden;
    height: 4rem;
}

.grid__item{
    display: inline-block;
    height: 100%;


}
.grid .grid__item:nth-child(1) {
    background: color;
    width: 10%
}

.grid .grid__item:nth-child(2) {
    background: color;
    width: 80%
}
.grid .grid__item:nth-child(3) {
    background: color;
    width: 10%
}

以下是此example的视图。

具有固定中心div的CSS布局，由相同大小的流体div包围

4 个答案: