1

我想用纯 CSS 实现这种布局：

布局

背景中的渐变是浏览器窗口宽度的 100%。内部文本位于 1000 像素的 div 内，位于浏览器窗口的中心。现在我希望文本定义渐变的高度。这就是问题所在：渐变是绝对定位的 ( left: 0px; width: 100%)，但文本位于另一个 div 内。

我已经尝试了一些东西，display:table;但是display:table-cell;一旦我将渐变 div 放到它上面，position:absolute它就不会继承文本 div 的高度。

任何人都可以解决如何在没有javascript的纯CSS中实现这一点？

编辑：

对不起，我忘了提到渐变不是问题（我使用 css3）。而且我也忘了添加代码：http: //jsfiddle.net/kxu8N/1/

4

6 回答 6

0

绝对定位的元素不是布局流程的一部分，因此它们不能从父元素继承尺寸信息。

您应该在包裹文本的元素上使用 CSS 背景图像（或 CSS3 渐变）来为您提供渐变，而不是使用单独的元素。

于 2012-09-20T14:56:35.663 回答
0

您可以使用 css3 background-size 属性来缩放渐变的高度。在以渐变为背景的 div 上将高度设置为自动。

于 2012-09-20T15:01:21.800 回答
0

这是一个不知道您的 HTML 结构的答案：http: //jsfiddle.net/8xagQ/1/

.gradient{
    background: -webkit-linear-gradient(left, rgba(0,119,255,0) 0%,rgba(0,119,255,1) 25%,rgba(0,119,255,1) 50%,rgba(0,119,255,1) 75%,rgba(0,119,255,0) 100%);

    margin:10px 0;
    text-align:center;
    color:#fff;
    padding:10px 0;
}​

请注意，我只包含了 webkit 的渐变说明。

于 2012-09-20T15:01:45.033 回答
0 
<html>
 <head>
<style type="text/css">
p,span{
    margin-left:20px;
}

#logo{
    font-weight: bold;
    height:100px;
}
#slogan{
    width:100%;
    height:150px;
    background: -webkit-linear-gradient(left, rgba(0,119,255,0) 0%,rgba(0,200,230,15) 25%,rgba(0,200,230,15) 50%,rgba(0,200,230,15) 75%,rgba(0,119,255,0) 100%);}
</style>
</head>
<body>
    <div id="logo">
        <p>Logo</p>
    </div>
    <div id="slogan">
        <span>some text that defines hieght of this</span>

    </div>
</body>
</html>
于 2012-09-20T15:17:40.027 回答
0

在我的情况下，我将你的蓝色移动到你的渐变中。这样，一旦你添加更多的行，它会自动创建一行文本

<div id="container">

    <div id="outer">
      <div id="blue-background">
         <div class="span3" id="blue">
          Here is my content<br>
             and this content should define the height of the underlying #blue-background <br />
             and if we are adding more and more and more
          </div>     
        </div>

    </div>

</div>

然后将文本插入其中，我更改了 CSS 中的一些设置

#blue {
  z-index: 1;
    position:relative;
    margin:auto;
    text-align:center;
}
于 2012-09-20T15:24:58.567 回答
0

因为我没有找到任何解决方案，所以我破解了它。因为我的内容是通过 javascript 动态添加的，所以我添加了两次内容。第一次在覆盖的 div 内可见（在蓝色背景上），第二次在蓝色背景内可见。visibility: hidden我将所有 div 隐藏在蓝色背景中。

而且因为两个 div 的内容相同，所以它们的高度相同。不漂亮，但它有效。

于 2012-09-26T09:59:45.283 回答