对准一些HTML元素到其父

的底部我有具有以下HTML结构的产品列表：对准一些HTML元素到其父

<div class="parent"> 
    <img src="myimg.jpg" /> 
    <div class="title">My Title</div> 
    <div class="buttons"></div> 
</div>

有许多家长彼此相邻。首先，我有一个问题，他们往往会是不同的高度（由于标题的长度不同）。我使用display: flex;修正了这个问题，所以现在他们都是一样的高度。不过，我需要buttons div坚持parent的底部，而标题和图片应该保持在原来的位置。所以我宁愿在按钮和之前的parent的孩子之间留有空白区域，而不是在按钮下方的底部留有空白区域。

我试图找到一个解决方案，但所有的结果导致这个CSS：

.parent { position: relative; } 
.buttons { position: absolute; bottom: 0; }

这种解决方案并没有为我工作，因为那时按钮可以重叠的称号。所以，我能想到的迄今为止最好的解决办法是使用底部填充是等于按钮的高度：

.parent { display: flex; position: relative; padding-bottom: 100px; } 
.buttons { position: absolute; bottom: 0; height: 100px; }

但我不知道这是否是最佳的解决方案，因为按钮的高度可能会改变或甚至是动态的。有更好的解决方案吗？

编辑：

下面是一个演示问题的代码片段。第一个父母有2个按钮，而第二个父母只有一个，这是为了 - 有些产品可能有不同数量的按钮，这就是我无法使用padding-bottom解决方案的原因之一。

#wrap { display: flex; } 
 
.parent { display: inline-block; position: relative; padding-bottom: 100px; width: 100px; border: 1px solid black; padding: 10px 20px 20px; margin: 0 5px 10px; } 
 
.buttons { position: absolute; bottom: 0; height: 100px; } 
 
.button-one { background: green; } 
 
.button-two { background: red; } 
 
.button-one, .button-two { margin: 15px 0 0; }

<div id="wrap"> 
 
    <div class="parent"> 
 
    <img src="myimg.jpg" /> 
 
    <div class="title">My Title</div> 
 
    <div class="buttons"> 
 
     <div class="button-one">Button one</div> 
 
     <div class="button-two">Button two</div> 
 
    </div> 
 
    </div> 
 
    <div class="parent"> 
 
    <img src="myimg.jpg" /> 
 
    <div class="title">My TitleMy TitleMy TitleMy TitleMy TitleMy TitleMy TitleMy TitleMy TitleMy TitleMy TitleMy TitleMy TitleMy TitleMy TitleMy TitleMy TitleMy TitleMy TitleMy Title</div> 
 
    <div class="buttons"> 
 
     <div class="button-one">Button one</div> 
 
    </div> 
 
    </div> 
 
</div>

来源

2016-11-04 Dmitriy Demir

这是一个farily没关系的解决方案 - 它并不难修改两处值。但是，您不应该使用'px'作为单位，因为网页上的任何内容都是如此。有几个例外，但按钮不是其中之一。使用'em'或'％'。 – junkfoodjunkie

提供一个有效的例子（jsfiddle/codepen/snippet）你可以做什么 – Dekel

？ – 2016-11-04 01:22:33

做到这一点，最简单的方法是添加填充底到你的“称号”。或者，如果您可以更改HTML结构，这是更好的选择。

以HTML格式尝试此布局。

来源

2016-11-04 01:21:02 NPN

请检查我添加的片段。为标题添加填充等同于将其添加到'.parent'，我已经提到这是一种可能的但可能不是完美的解决方案。你会如何建议更改HTML？我只能在这里看到一个CSS问题，但随时可以证明我错了。 –

请看我刚添加的布局。 – NPN

我明白了你的意思，但我担心这可能会导致更多问题解决。这些按钮应该在同一个父级中，因为父级具有可见边框，如果我将按钮和其余内容分割成单独的行，那么我需要将它们水平对齐，并且它可能看起来比固定的更混乱'填充-bottom'。谢谢你的想法！ –

尝试增加clear: both;和float: left;将其发送到其父的最底部。

像这样：

.buttons { position: absolute; bottom: 0; height: 100px; clear: both; float: left; width: 100px; }

来源

2016-11-04 01:21:10

但是这些元素不是浮动的......我应该在哪个元素上应用'clear：both;'？ –

您想要转到父元素的底部。 – 2016-11-04 01:40:04

但这不起作用，首先是因为'清除'[只能在浮动状态下工作]，其次即使我使元素浮动，我不能使他们用'clear'粘在父母的底部。请检查代码段以查看问题。也许我弄错了，如果是的话，请提供你的意思的片段。 –

我不知道这是否是问题，但我认为你需要添加一个高度和宽度

来源

2016-11-04 01:23:12

高度是动态的，取决于内容，但是您的宽度是正确的。我试图只提到相关的代码，但希望现在更清楚的是我添加到问题中的代码片段。 –

对准一些HTML元素到其父

回答

相关问题