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內部填充外部分區

回答

相關問題