Question

我需要为植物生成标签，我希望植物代码位于左下角，物种分布占据剩余区域。我正在使用html和css这样做。

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

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

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

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

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

我不知道。我试图改编的代码使用表格，但我认为我不能以L形式合并单元格，或者我可以吗？我尝试使用position-absolute，但是为对象S保留的空间停留在我不想要该对象的位置，并且S的内容被替换到我想要的位置{{1} }，但那里没有为它预留空间。（见下面的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处于同一级别的空间。

.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;
  }

Answer 1

这可能会为你做到

＆＃13;

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

＆＃13;

<form method="get">
<input type="text" value="11" id="input"> 
<button type="button" id="button">Click Me!</button>
</form>

<script>
$(document).ready(function(){

    $('#button').click(function(e) {  
        var inputvalue = $("#input").val();
        window.location.replace(" http://www.example.com/page/"+inputvalue);

    });
});
</script>

＆＃13;

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

使用新的CSS Shapes进行更新阅读（虽然浏览器支持不好）http://www.html5rocks.com/en/tutorials/shapes/getting-started/

附加说明：

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

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

Answer 2

这不是一个完美的答案，因为s盒不会占用空间，所以b中的元素必须经过精心设计，不要在它下面，但也许它可以提供一些灵感：

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: