CSS内部填充外部分区

我是新来的CSS和有关扩大内部DIV的内容填充整个外部分区的问题。CSS内部填充外部分区

我一直在研究几个小时的问题的答案，并发现了几十个类似的问题，但没有一个建议的解决方案适用于我。我确信这是我误解了一些根本性的东西，但我似乎无法指责它。

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

<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>

我有一个CSS这么多的麻烦，因为我不知道该怎么形容优雅，我想什么 - 我是一个开发商不是一个设计师！

.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，hover CSS东西在outer-container悬停机制并不一致。

我希望我有道理......就像我说的，我有一个可怕的时间来解释设计的东西。

有什么建议吗？

来源

2015-07-03 Rico

你只需要设置背景颜色为outer-container。

当您将background-color设置为<a>标记时，仅将背景颜色分配给文本。

这里是你更新的fiddle。

以下是摘录。

.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; 
 
}

<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>

来源

2015-07-03 15:11:02

是的，这是解决我的问题。不幸的是，我的实际问题稍微复杂一点，我的问题并没有解决。 :(+1为原始问题的解决方案 - 但我要更新以包含所有内容 – Rico

“接受”有用的答案是一种很好的做法，因为它可以帮助将来访问此问题的所有人。 –

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

这将解决您的直接问题。

见http://jsfiddle.net/n1gva5b4/

来源

2015-07-03 15:05:37 MattieTK

万一外部容器的反应没有帮助，另一种是设置在display: block内部容器。块级元素是默认情况下在父级上占用所有可用水平空间的元素（可能是其中一个答案），并且可以将“内联级别”元素（如默认情况下为a）置于文本块的中间，只影响其自己的文本，而不会重新围绕它的任何布局。

来源

2015-07-03 15:13:13 Katana314

如果是你，我会制作一个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>

来源

2015-07-03 15:17:28 Daniel

CSS内部填充外部分区

回答

相关问题