html - 动态宽度上的标题元素溢出 - 显示 : block and min-height/width on contained container div

Question

我正在尝试完成这样的事情:

特别是白色轮廓的垂直文本。

我能够做到这一点并使其动态化(因此每个单词“fale”“que”“nem”“um”“gringo”之间没有重叠)，但它要求我创建一个包含 div对于每个 header ，像这样，

<div id="fale_textbox_0">
    <div class="highlight0a" id="Fale">
       <h1 class="fale_heading">Fale</h1>
    </div>
    <div class="highlight0a" id="que">
        <h1 class="fale_heading">que</h1>
    </div>
    <div class="highlight0a" id="nem">
       <h1 class="fale_heading">nem</h1>
    </div>
    <div class="highlight0a" id="um">
       <h1 class="fale_heading">um</h1>
    </div>
</div>

我知道是因为是 block 型元素。为什么，那我这样做是不是不行

<div id="fale_text_container">
    <h1 class="fale_heading" id="fale">Fale</h1>
    <h1 class="fale_heading" id="que">que</h1>
    <h1 class="fale_heading" id="nem">nem</h1>
    <h1 class="fale_heading" id="um">um</h1>
    <div id="fale_textbox_2">
        <h1 class id="fale_heading_2">Rápido</h1>
    </div>
    <div id="fale_textbox_3">
        <h2 id="fale_subheading_2">Sem Sotaque</h2>
    </div>
    <div id="fale_textbox_1">
        <h2 id="fale_subheading_1">GRINGO</h2>
    </div>

然后将容器设置为display: block与 min-width和 max-width已确立的。像这样:

  #fale_container {
          width: 100%;
          float: left;
          margin-left: 0;
          margin-right: 0;
          background-color: black;
          height: auto;
          min-height: 300px;
          position: relative; }

    #fale_container_padding {
          position: relative;
          height: 20%; }

    #fale_text_container {
          position: relative; }

    .fale_heading {
          display: block;
          position: absolute;
          width: 13.32756%;
          float: left;
          margin-right: 0.00666%;
          margin-left: 13.33422%;
          color: black;
          font-size: 3.5em;
          clear: right; }

    #fale, #que, #nem, #um {
          z-index: 10; }

    #fale {
          margin-top: -18%; }

    #fale:after {
          content: '';
          z-index: -1;
          position: absolute;
      background-color: #fff;
          width: 87%;
          height: 100%;
          left: 8%; }

    #que {
          margin-top: -9.5%; }

    #que:after {
          content: '';
          z-index: -1;
          position: absolute;
          background-color: #fff;
          height: 100%;
          width: 73%;
          left: 8%; }

    #nem {
          margin-top: -1%; }

    #nem:after {
      content: '';
          z-index: -1;
          position: absolute;
          background-color: #fff;
          height: 100%;
          width: 82%;
          left: 8%; }

    #um {
          margin-top: 7%; }

    #um:after {
          content: '';
          z-index: -1;
          position: absolute;
          background-color: #fff;
          height: 100%;
          width: 89%;
          left: 8%; }

当我这样做时，会出现重叠。 JSfiddle

单独阻止是行不通的。 block 也没有和 min-width和 min-height. min-width 也没有和 min-height没有block.是不是因为容器设置为position:relative在 <div> 里面高度设置为 auto?

为什么不 Block也不min属性是否正常？

Answer 1

这是一个编辑过的 fiddle :http://jsfiddle.net/0ya6zfLf/1/

HTML

您需要将所有 float 元素包装到一个容器中，并为其指定 position: absolute;。 (而不是单独的标题)这样你的每个标题都可以相对定位并完美地保持它们的高度。

<div class="white-strips-container">
    <h1 class="fale_heading" id="fale">Fale</h1>
    <h1 class="fale_heading" id="que">que</h1>
    <h1 class="fale_heading" id="nem">nem</h1>
    <h1 class="fale_heading" id="um">um</h1>
</div>

CSS

对于新的包装类

.white-strips-container {
    position: absolute;
    width: 150px;
}

对于标题

.fale_heading {
  display: inline-block;
  line-height: 20px;
  margin-right: 0.00666%;
  margin-left: 13.33422%;
  color: black;
  font-size: 3.5em;
  height: 50px;
  clear: right; 
  background-color: #fff;
  margin-top: 0;
  margin-bottom: 10px;
}