Question

我遇到了正确对齐div元素的问题。

例如：在我的网站上： http://www.journeywithandrew.com/messel-pit-fossil-site-unesco-site/

你可以看到有一个介绍，然后是一个关键事实＆＃39;框。

我想要的是关键事实＆＃39;盒子要长大。因此，框中的最后一行与内容文本的最后一行内联。当然，对于介绍文本来回顾＆＃39;关键事实＆＃39;框。所以我真正想要的是在右下方对齐那个盒子。希望这是有道理的..

试图在关键事实＆＃39;上做出负的上限。框，但不会取代介绍文本。只是让它覆盖文本。

有什么建议吗？

Answer 1

我认为FIDDLE会帮助您找出放置框的位置。

（试错）

根据页面换行或屏幕的宽度，文本位置可能会发生变化。

CSS

.page-wrap {
    width: 600px;
}
.spacerdiv {
    height: 100px;
}
.stuff {
    float: right;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    border: 1px solid black;
    border-radius: 5px;
}

Answer 2

您有以下一般格式：

<div class="entry-content">
    <p>Some words</p>
     <div class="keyfactsunescowrapper">
          <!-- This block -->
     </div>
</div>

作为块级元素的段落标记将下一个内容推送到新行。浮子尊重它并且不会自我推升。

但是，您可以在段落之前放置关键事实块并解决问题。因为它是向右浮动的，它允许段落在同一行上流动，并且段落不会将它推到新行，因为段落在它之后。

<div class="entry-content">
     <div class="keyfactsunescowrapper">
          <!-- This block -->
     </div>
    <p>Some words</p>
</div>

内联div元素对齐

2 个答案: