Question

我是CSS的新手，并且有一个关于扩展内部DIV内容以填充整个外部div的问题。

我几个小时以来一直在研究我的问题的答案，并找到了几十个类似的问题，但没有一个建议的解决方案适合我。我确信这是我误解了一些基本的东西，但我似乎无法指责它。

我需要让蓝色背景覆盖“其他东西”和“更多不同东西”之间的整个块，并且文本必须在蓝色块中垂直和水平居中 - 并保持相同的悬停质量和{{1规则。

text-decoration

我在CSS上遇到了很多麻烦，因为我不知道如何优雅地描述我想要的东西 - 我是开发人员而不是设计师！

<div>
    <span>Some other stuff</span>
</div
<div class="outer-container">
    <h2>
        <a class="inner-container" href="https://www.google.com" target="_blank">
            Lorem ipsum
        </a>
    </h2>
</div>
<div>
    More different stuff
</div>

如果我将.outer-container { background-color: #337AB7; text-align: center; vertical-align: middle; position: relative; } .inner-container { background-color: #337AB7; color: #fff; height: 100%; font-size: x-large; &:focus, &:hover, &:link { background-color: #286090; color: #fff; text-decoration: none; } }，focus CSS内容放在hover中，则悬停机制不一致。

我希望我有意义......就像我说的那样，我有一个可怕的时间解释设计的东西。

有什么建议吗？

Answer 1

您只需将背景颜色设置为outer-container。

将background-color设置为<a>代码时，背景颜色仅分配给文本。

您已更新fiddle。

以下是摘录。

＆＃13;

.outer-container {
  text-align: center;
  vertical-align: middle;
  position: relative;
  background: #337AB7;
}
.inner-container {
  background-color: #337AB7;
  color: #fff;
  height: 100%;
  font-size: x-large;
}

＆＃13;

<div> <span>Some other stuff</span>

</div>
<div class="outer-container"> <a class="inner-container" href="http://www.google.com" target="_blank">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vestibulum purus vel iaculis accumsan. Nulla vel massa velit. Proin a nisl vel tortor tincidunt pharetra. Nulla tristique porttitor erat. In laoreet, erat non ultricies vulputate, massa mauris tempor ligula, sed dignissim ex augue sit amet sapien. Donec malesuada massa eget turpis consectetur, at feugiat velit aliquam. Fusce dictum ornare dignissim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer non consectetur nunc, at sollicitudin nibh.</a>

</div>
<div>More different stuff</div>

＆＃13;

Answer 2

为什么不能将背景颜色更改为父.outer-container？

这将解决您的直接问题。

请参阅http://jsfiddle.net/n1gva5b4/

Answer 3

如果是你，我会创建一个div容器，并在div（innerContainer）中插入a-link-tag。因此，Conainer执行其所谓的（包含某些内容），根据需要应用颜色，链接也可以正常工作。

像这样：

<div class="outer-container">
     <div class="inner-container" >
        <a href="http://www.google.com" target="_blank">Lorem ipsum dolor sit</a>
     </div>
 </div>

Answer 4

如果外部容器响应没有帮助，另一种方法是在内部容器上设置display: block。块级元素是默认占用其父级所有可用水平空间的元素（例如，这些答案之一）和＆＃34;内联级别＆＃34;像a这样的元素（默认情况下，默认情况下）可以放在一个文本块的中间，只影响它自己的文本而不会重新流动它周围的任何布局。

CSS内部Div填充外部Div

4 个答案: