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

Question

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

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

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

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

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

我想我必须先放置对象S，然后让B占据剩下的空间。

我不知道。我尝试改编的代码使用表格，但我认为我不能合并 L 形式的单元格，或者我可以吗？我已经尝试使用 position-absolute，但是为对象 S 保留的空间停留在我不想要对象的地方，S 的内容> 被替换到我想要 S 的地方，但那里没有为它保留空间。 (参见下面的 https://stackoverflow.com/a/33058256/78912)

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

.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 至少占用一点空间，与 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

这可能会为你做

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

来源:Can you float a div in the lower right of its parent div and have text wrap around it?

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

补充说明:

使用 Canvas 元素并计算/绘制文本可能是另一种选择，您可以在其中将内容准确地放置在您想要的位置。

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