合并 table 中的三个单元格 - 或使用 div

Question

我需要为植物生成标签，左下角要植物代码，其余区域为物种分布。我正在使用 html 和 css 执行此操作。

我的设计有一个较小的元素 S 在一个较大的元素 B 之上，它们两个在底部对齐。

+-----------------------------+
|      B                      |
+--------------+              |
|      S       |              |
+--------------+--------------+

在顶部对齐是你自然而然的，但这绝对不是我需要的...

+--------------+--------------+
|      S       |              |
+--------------+              |
|      B                      |
+-----------------------------+

我想我必须先放置物体S，然后让B占据左边的space。

我不知道。我尝试改编的代码使用表格，但我认为我不能合并 L 形式的单元格，或者我可以吗？我已经尝试使用 position-absolute，但是为对象 S 保留的 space 保留在我不想要该对象的位置，并且 S 的内容被替换到我想要的位置S，但那里没有为它保留 space。（见下文）

我正在添加整个代码，我认为这有点过分了，但它来了。

.label {
    border: 1px solid black;
    padding: 2px;
    margin: 1px;
    width: 78mm;
    height: 45mm;
    float: left;
    /*page-break-inside: avoid;*/
    page-break-before: auto;
    page-break-after: auto;
    orphans: 100;
    widows: 100;
    overflow: hidden;
    box-sizing: border-box;
  }
.family {
    /* border: 1px solid red; */
    text-align: center;
    font: normal bold 14pt Arial, sans;
    margin-top: 3mm;
    height: 1.2em;
    width: 100%;
  }
.name {
    /* border: 1px solid red; */
    text-align: center;
    margin-top: 1mm;
    font: normal normal 14pt Arial, sans;
    height: 18mm;
    width: 100%;
    vertical-align: middle;
}
.species {
    /* border: 1px solid blue; */
    text-align: center;
    font: normal normal 14pt Arial, sans;
    width: 100%;
    margin-bottom: .5em;
  }
.vernacular {
    /* border: 1px solid green; */
    text-align: center;
    font: normal bold 14pt Arial, sans;
    width: 100%;
    margin-bottom: .5em;
  }

.code {
    /* border: 1px solid orange; */
    font: normal normal 12pt serif;    
    vertical-align: bottom;
    text-align: left;
    white-space: nowrap;
  }
.distribution {
    /* border: 1px solid blue; */
    font: normal normal 11pt serif; 
    vertical-align: bottom;
    text-align: right;
    float: right;
  }

.code2 {
    /* border: 1px solid orange; */
    font: normal normal 12pt serif;    
    text-align: left;
    float: left;
    white-space: nowrap;
    margin: 0 9pt 0 0;
    float: left;
  }

  <table class="label">
    <tbody><tr>
      <td colspan="2" class="family">Myrtaceae</td>
    </tr>
    <tr>
      <td colspan="2" class="name">
 <div class="species">
   <i>Eugenia</i> <i>uniflora</i>
 </div>
 <div class="vernacular">
   
 </div>
      </td>
    </tr>
    <tr>
      <td colspan="2">
<div>
<div class="distribution">Northern South America, Northern Argentina, Panamá, Costa Rica, Francia</div>
<div class="code2"><div>0G 1968GR01496.1</div></div>
</div>
      </td>
    </tr>
  </tbody>
</table>

更紧凑，只有底部的 S 和 B 元素，我没有设法让两者的底部基线对齐，也没有说服 B 至少占据space 与 S.

处于同一水平

.label {
border: 1px solid black;
padding: 2px;
margin: 1px;
width: 78mm;
height: 45mm;
float: left;
/*page-break-inside: avoid;*/
page-break-before: auto;
page-break-after: auto;
orphans: 100;
widows: 100;
overflow: hidden;
  }
.distribution {
/* border: 1px solid blue; */
font: normal normal 11pt serif; 
vertical-align: bottom;
text-align: right;
float: right;
  }

.code2 {
/* border: 1px solid orange; */
font: normal normal 12pt serif;    
text-align: left;
float: left;
white-space: nowrap;
margin: 4pt 9pt 0 0;
display:inline-block;
vertical-align:bottom;
  }

  <div class="label">
<p>above we have family, species, vernacular name...</p>
<div class="distribution">Northern South America, Northern Argentina, Panamá, Costa Rica, Costa Rica, Costa Rica, Costa Rica, Costa <div class="code2">0G 1968GR01496.1</div>Rica</div>
</div>

Answer 1

这不是一个完美的答案，因为 s 框不占用 space，因此 b 中的元素必须小心设计样式，不要放在它下面，但也许它可以提供一些灵感:

#hello1 {
    background-color:grey;
    height:100px;
    width: 100px;
    position: relative;
}

#hello2 {
    background-color:white;
    position: absolute;
    display: block;
    height:50px;
    width:50px;
    bottom: 0px;
    left: 0px;
}

<div id="hello1">
    hello what is going on my freind 123 go take a helicopter.
    <div id="hello2">
        hello2
    </div>
</div>

Answer 2

这可能适合你

#parent {
  width: 350px;
  height: 150px;
  overflow: hidden;
  background-color: #ddd;
}

#parent:before {
  content: '';
  height: 65%;
  float: left;
}

#pusher {
  width: 160px;
  height: 35%;
  float: left;
  clear: left;
  background-color: #aaa;
}

<div id="parent">
  
  <div id="pusher">0G 1968GR01496.1</div>
  
  <div>
      <div class="species">
          <i>Eugenia</i> <i>uniflora</i>      
      </div>
      <div class="distribution">
        Northern South America, Northern Argentina, Panamá, Costa Rica,
        Northern South America, Northern Argentina, Panamá, Costa Rica,
        Northern South America, Northern Argentina, Panamá, Costa Rica,
        Northern South America, Northern Argentina, Panamá, Costa Rica,
        Northern South America, Northern Argentina, Panamá, Costa Rica,
      </div>
  </div>
</div>

来源：

进一步阅读使用新的 CSS 形状（虽然浏览器支持不佳）http://www.html5rocks.com/en/tutorials/shapes/getting-started/

补充说明：

使用 canvas 元素和 calculate/draw 文本可能是另一种选择，您可以在其中准确地放置内容。

在这里进一步阅读：
https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_text

合并 table 中的三个单元格 - 或使用 div

merge three cells in table - or using div

html

css

typesetting