Question

关于如何与右下角对齐的帖子很多，但它们都使用了绝对的，我无法做到这一点，因为我不希望我的2个元素重叠如果有人碰巧对于窗户大小来说太大了。

我尝试使用float，它可以正确对齐，但不能对齐底部

<div style="border-bottom: 1px solid; padding-bottom:10px;">

    <h1 style="display:inline;">
      This is my big title - Bla bla bla   
    </h1>

    <div style="
            font-size: small;
            float: right;
            padding: 5px 0px 0px 20px;
            font-style: italic;
            display: inline;">
        Published on Friday 11th August 2017 at 12:46   
    </div>

    <div style="clear:both"></div>

</div>

您可以在https://jsfiddle.net/j66q82gy/7/

中查看结果

当窗口狭窄时，它没有对齐底部并不重要，但是当窗口很宽并且h1和中间div都在同一条线上时，很明显它和＃39;没有对齐底部，我需要将它对齐到底部。

我还需要将它们保持在同一行，因此内联应保留在h1和中间div上。

编辑：Flex把东西放在一个笨拙的半内联，半块像这样：i.imgur dot com / YA6TdBt.png

我需要看起来像这样的东西i.imgur dot com / Awj9Bht.png（顶部图像是我的代码，底部图像是照片看起来像我需要的。）

Answer 1

使用Flexbox，您可以在底部对齐并保持内部div右对齐。

将display: flex; align-items: flex-end添加到外部div，重置h1上的边距（或者您可以将其中一个添加到另一个内部div），然后设置{{1} }}到内部margin-left: auto;

div会使内部align-items: flex-end底部与div保持一致，h1会将内部margin-left: auto;推向右侧。

请注意，由于字体大小不同，其内部指标会在div下方创建更大的空白区域。在这里，我只在内部h1添加了4px底部填充，但您也可以使用整体div

根据评论更新

如果要将文字解包，直到它们达到父母宽度，请将line-height添加到外部flex-wrap: wrap;

＆＃13;

div

＆＃13;

Answer 2

您可以使用flexbox属性代替float ...

完全更新的答案

fiddle

＆＃13;

.flex {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
}

.flex div {
  margin-left: auto;
}

＆＃13;

<div style="border-bottom: 1px solid; padding-bottom:10px;" class="flex">
  <h1>
    This is my big title - Bla bla bla
  </h1>
  <div style="
            font-size: small;
            padding: 5px 0px 0px 20px;
            font-style: italic;">
    Published on Friday 11th August 2017 at 12:46

  </div>
</div>

＆＃13;

Answer 3

这是你想象的吗？

<div style="border-bottom: 1px solid; padding-bottom:10px; display:flex; flex-wrap: wrap;">

    <h1 style="display:inline;">
      This is my big title - Bla bla bla   
    </h1>

    <div style="
            font-size: small;
            float: right;
            padding: 5px 0px 0px 20px;
            font-style: italic;
            align-self: flex-end;
            margin-left: auto;">
        Published on Friday 11th August 2017 at 12:46   
    </div>

    <div style="clear:both"></div>

</div>

https://jsfiddle.net/eq6jLnct/5/

将高度更改为您需要的任何高度。或者只使用最小高度。

请注意，并非所有浏览器都支持flexbox：http://caniuse.com/#search=flex-box

Answer 4

检查this codePen我添加了，这是CSS：

float: right;
transform: translateY(0px);

Answer 5

希望这会有所帮助

<div style="border-bottom: 1px solid; padding-bottom:10px;display: table;">

    <h1 style="display:inline;">
      This is my big title - Bla bla bla   
    </h1>
    
    <div style="
            font-size: small;
            padding: 5px 0px 0px 20px;
            font-style: italic;
           display: table-cell;
           vertical-align:bottom;">
    	Published on Friday 11th August 2017 at 12:46 	
    </div>
		
    <div style="clear:both"></div>

</div>

Methord 2：

您可以浏览flexbox的链接，因为它非常易于使用且反复高效。

如何在不使用绝对位置的情况下将div对齐到右下角？

5 个答案: