Question

我试图完成这样的事情：

特别是白色的垂直文字。

enter image description here

我能够做到这一点并让它变得动态（所以每个单词之间没有重叠＆＃34; fale＆＃34;＆＃34; que＆＃34;＆＃34; nem＆＃34;＆＃ 34;嗯＆＃34;＆＃34; gringo＆＃34;），但它要求我为每个标题创建一个包含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. min-width和min-height都没有block.这是因为容器设置为{{1} } position:relative内部的高度设置为<div>

为什么不要auto?或Block属性正常工作？

Answer 1

这是一个经过编辑的小提琴：link

<强> HTML

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

heading元素动态宽度溢出 - 显示：包含容器div的块和最小高度/宽度

1 个答案: