如何堆叠内嵌块元素

  • Z时代
  • 2024-01-10
  • 分类：问答

是否可以堆栈内嵌块元素？如何堆叠内嵌块元素

我有一个DIV，我希望它里面的元素（h1和P）居中。因此，我将DIV设置为文本对齐中心，并分别将H1和P标记分别设置为内嵌块。

这个想法是将两个元素（H1和P）显示为内嵌块元素，所以内容居中，透明PNG在背景中显示文本的长度。

但我遇到的问题是，有内嵌块的元素意味着他们会出现在彼此旁边（我不希望发生这种情况），所以我设置P标记为块元素，但它导致了透明PNG是一样宽。

HTML: 
<div id="hero"> 
     <div class="container"> 
      <div class="row"> 
       <div class="span12" id="hero-text"> 
        <h2>Heading line</h2> 
        <p>Paragraph line goes here</p>        
       </div> 
      </div> 
     </div> 
</div> 
CSS 
#hero { 
height: 435px; 
width: 100%; 
background: url(../img/hero-image.png) 0 0 no-repeat; 
background-color: #999; 
position: relative; 
color: #FFF; 
border-bottom: 3px solid #E6E6E6; 
} 
#hero-text { 
position: absolute; 
top: 33%; 
text-align: center; 
} 
#hero h2 { 
font-size: 4em; 
font-style: normal; 
line-height: 50px; 
padding-top: 10px; 
background: url(../img/bg-heading.png) repeat; 
display: inline-block; 
padding: 10px 20px; 
} 
#hero p { 
font-size: 2em; 
line-height: 30px; 
display: block; 
background: url(../img/bg-heading.png) repeat; 
padding: 10px 20px; 
}

任何帮助表示赞赏。

回答：

这实际上比我原先想象的更难解决。我可以为你找到两个选择。如果你不想改变你的标记：

  1. 赋予这两个#hero H2和#hero p显示中的：inline-block的，并给他们宽，以便它们的联合宽度大于100％。它们都可以是宽度：51％，或者一个可以比另一个宽，只要它们的总数大于父宽度即可。这将导致p破坏到一个新的行。见http://codepen.io/anon/pen/cjDiH或

2.如果你希望自己的宽度是液体，我会在H2和P上显示之间添加元素：块。我添加了hr，然后拿走了它的边距，填充和边框，使其不可见，除了导致换行外。请参阅http://codepen.io/anon/pen/AGDti

回答：

我看到你想出了让他们像你的截图一样叠加。

现在，

尝试在你的CSS添加到width: auto;#hero p。

以上是 如何堆叠内嵌块元素 的全部内容， 来源链接： utcz.com/qa/257966.html

回到顶部