объединить три ячейки в таблице - или с помощью 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"> 
 
\t <div class="species"> 
 
\t <i>Eugenia</i> <i>uniflora</i> 
 
\t </div> 
 
\t <div class="vernacular"> 
 
\t 
 
\t </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

Thi s может сделать это для вас

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

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

Furter чтения с использованием новых CSS Shapes (плохая поддержка браузера, хотя) http://www.html5rocks.com/en/tutorials/shapes/getting-started/

Дополнительное примечание:

Использование элемента canvas и вычисления/рисования текста может быть ano ther, где вы можете разместить вещи именно там, где хотите.

Дальнейшее чтение здесь:
https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_text

Answer 2

Это не идеальный ответ, потому что s коробка не занимает места, поэтому элементы внутри Ь должны быть тщательно оформлены, чтобы не идти под ним, но, возможно, это может обеспечить некоторое вдохновение:

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