动态宽度显示上的标题元素溢出:包含的容器div上的块和最小高度/宽度

Question

我正试图实现这样的目标：

特别是以白色勾勒的垂直文本。

​

​

我能够做到这一点并使其具有动态(因此每个单词"fale“、"que”、"nem“、”嗯“、"gringo")之间没有重叠，但它要求我为每个标头创建一个包含div的内容，如下所示，

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

我知道这是因为它是块类型的元素。为什么，如果我这么做了，那就没用了

<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.也没有，没有block.的min-width和min-height也不是，因为容器在高度设置为auto?的<div>中被设置为position:relative

为什么Block和min属性不能正常工作？

Answer 1

下面是一个编辑好的小提琴：http://jsfiddle.net/0ya6zfLf/1/

您需要将所有浮动元素包装到一个容器中，并将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;
}