0

对于图形效果，我正在尝试创建一个具有特定宽度（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>
4

4 回答 4

0

float:left也许如果你display:inline-block在每个div. 看看它是如何工作的。

于 2013-07-14T00:51:18.893 回答
0

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

例如：

<div class="wrapper">
    <div id="leftDiv"> div content </div>
    <div id="centerDiv"> div content </div>
    <div id="rightDiv"> div content </div>
</div>
于 2013-07-14T00:52:15.120 回答
0

我认为您最好使用 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
}

我可能会尝试将流体设计（在布局上使用百分比）与媒体查询结合使用，以使文档在不同的屏幕尺寸下看起来正确。

于 2013-07-14T01:29:21.793 回答
0

最干净且问题较少的方法是在 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%
}

这是此示例的视图。

于 2013-07-14T01:31:58.580 回答