blocks|key|4490572|text|您可以使用display:+flex将元素定位到底部，但我认为在这种情况下不希望使用flex，因为它会影响所有元素。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4490573|要使用flex将元素定位到底部，请尝试执行以下操作：|4490574|.container+{
++display:+flex;
}

.button+{
++align-self:+flex-end;
}|code-block|syntax|javascript|4490575|最好的方法是将按钮设置为position:+absolute并将其设置为bottom:+0，或者您也可以将按钮放在容器外部，然后使用负transform:+translateY(-100%25)将其放入容器中，如下所示：|offset|length|style|CODE|4490576|.content+{
++++height:+400px;
++++background:+#000;
++++color:+#fff;
}
.button+{
++++transform:+translateY(-100%25);
++++display:+inline-block;
}|4490577|检查此JSFiddle|4490578|entityMap|0|LINK|mutability|MUTABLE|url|https://jsfiddle.net/d6hk7vjc/1/^0|0|0|0|10|9|1V|S|0|0|3|8|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|11|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|12|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|13|8|@$K|14|L|15|M|N]|$K|16|L|17|M|N]]|9|@]|A|$]]|$1|O|3|P|5|F|7|18|8|@]|9|@]|A|$G|H]]|$1|Q|3|R|5|6|7|19|8|@]|9|@$K|1A|L|1B|1|1C]]|A|$]]|$1|S|3|-4|5|6|7|1D|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|Z]]]]

<p>You can use display: flex to position an element to the bottom, but I do not think you want to use flex in this case, as it will affect all of your elements. </p>

<p>To position an element to the bottom using flex try this:</p>

<pre class="lang-css prettyprint-override"><code>.container {
  display: flex;
}

.button {
  align-self: flex-end;
}
</code></pre>

<p>Your best bet is to set position: absolute to the button and set it to <code>bottom: 0</code>, or you can place the button outside the container and use negative <code>transform: translateY(-100%)</code> to bring it in the container like this:</p>

<pre class="lang-css prettyprint-override"><code>.content {
    height: 400px;
    background: #000;
    color: #fff;
}
.button {
    transform: translateY(-100%);
    display: inline-block;
}
</code></pre>

<p>Check this <a href="https://jsfiddle.net/d6hk7vjc/1/" rel="noreferrer">JSFiddle</a></p>


blocks|key|4490628|text|对flexbox不太确定，但是你可以使用position属性。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4490629|设置父div+position:+relative和子元素，可以是<p>或<h1>等。设置position:+absolute和bottom:+0。|offset|length|style|CODE|4490630|示例：|4490631|index.html|4490632|<div+class="parent">
++<p>Child</p>
</div>|code-block|syntax|javascript|4490633|style.css|4490634|.parent+{
++background:+gray;
++width:+10%25;
++height:+100px;++++
++position:+relative;
}
p+{
++position:+absolute;
++bottom:+0;
}|4490635|Code+pen+here.|4490636|entityMap|0|LINK|mutability|MUTABLE|url|https://codepen.io/sannjayshr555/pen/OdNLBX^0|0|3|3|7|I|X|3|11|4|19|I|1S|9|0|0|0|0|0|0|0|E|0|0^^$0|@$1|2|3|4|5|6|7|14|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|15|8|@$D|16|E|17|F|G]|$D|18|E|19|F|G]|$D|1A|E|1B|F|G]|$D|1C|E|1D|F|G]|$D|1E|E|1F|F|G]|$D|1G|E|1H|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|1I|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|1J|8|@]|9|@]|A|$]]|$1|L|3|M|5|N|7|1K|8|@]|9|@]|A|$O|P]]|$1|Q|3|R|5|6|7|1L|8|@]|9|@]|A|$]]|$1|S|3|T|5|N|7|1M|8|@]|9|@]|A|$O|P]]|$1|U|3|V|5|6|7|1N|8|@]|9|@$D|1O|E|1P|1|1Q]]|A|$]]|$1|W|3|-4|5|6|7|1R|8|@]|9|@]|A|$]]]|X|$Y|$5|Z|10|11|A|$12|13]]]]

<p>Not sure about flexbox but you can do using the position property.</p>

<p>set parent <code>div</code> <code>position: relative</code>
and child element which might be an <code>&lt;p&gt;</code> or <code>&lt;h1&gt;</code> etc.. set <code>position: absolute</code> and <code>bottom: 0</code>.</p>

<p>Example:</p>

<p>index.html</p>

<pre class="lang-html prettyprint-override"><code>&lt;div class="parent"&gt;
  &lt;p&gt;Child&lt;/p&gt;
&lt;/div&gt;
</code></pre>

<p>style.css</p>

<pre class="lang-css prettyprint-override"><code>.parent {
  background: gray;
  width: 10%;
  height: 100px;    
  position: relative;
}
p {
  position: absolute;
  bottom: 0;
}
</code></pre>

<p><a href="https://codepen.io/sannjayshr555/pen/OdNLBX" rel="noreferrer">Code pen here.</a></p>


blocks|key|4490645|text|尝尝这个|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4490646|​|4490647|.content+{
++++++display:+flex;
++++++flex-direction:+column;
++++++height:+250px;
++++++width:+200px;
++++++border:+solid;
++++++word-wrap:+break-word;
++++}

+++.content+h1+,+.content+h2+{
+++++margin-bottom:+0px;
++++}

+++.content+p+{
+++++flex:+1;
++++}|code-block|syntax|javascript|4490648|+++<div+class="content">
++<h1>heading+1</h1>
++<h2>heading+2</h2>
++<p>Some+more+or+less+text</p>
++<a+href="/"+class="button">Click+me</a>
</div>|4490649|4490650|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>Try This</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.content {
      display: flex;
      flex-direction: column;
      height: 250px;
      width: 200px;
      border: solid;
      word-wrap: break-word;
    }

   .content h1 , .content h2 {
     margin-bottom: 0px;
    }

   .content p {
     flex: 1;
    }</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>   &lt;div class="content"&gt;
  &lt;h1&gt;heading 1&lt;/h1&gt;
  &lt;h2&gt;heading 2&lt;/h2&gt;
  &lt;p&gt;Some more or less text&lt;/p&gt;
  &lt;a href="/" class="button"&gt;Click me&lt;/a&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|4491653|text|如果能够修改HTML结构，则可以将所有顶级元素包装在单独的div中，然后使用justify-content:+space-between。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4491654|如下所示：|4491655|<div+class="content">
++<div>
++++<h1>heading+1</h1>
++++<h2>heading+2</h2>
++++<p>Some+more+or+less+text</p>
++</div>
++<a+href="/"+class="button">Click+me</a>
</div>|code-block|syntax|javascript|4491656|.content+{
++display:+flex;
++flex-direction:+column;
++justify-content:+space-between;
}|4491657|entityMap^0|T|3|12|U|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]|$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|V|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|W|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|X|8|@]|D|@]|E|$K|L]]|$1|O|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|P|$]]

<p>If you're able to modify the HTML structure, you can wrap all your top elements in a separate <code>div</code> and then use <code>justify-content: space-between</code>.</p>
<p>Something like this:</p>
<pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;content&quot;&gt;
  &lt;div&gt;
    &lt;h1&gt;heading 1&lt;/h1&gt;
    &lt;h2&gt;heading 2&lt;/h2&gt;
    &lt;p&gt;Some more or less text&lt;/p&gt;
  &lt;/div&gt;
  &lt;a href=&quot;/&quot; class=&quot;button&quot;&gt;Click me&lt;/a&gt;
&lt;/div&gt;
</code></pre>
<pre class="lang-css prettyprint-override"><code>.content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
</code></pre>


<p>I have a <code>div</code> with some children:</p>

<pre><code>&lt;div class="content"&gt;
  &lt;h1&gt;heading 1&lt;/h1&gt;
  &lt;h2&gt;heading 2&lt;/h2&gt;
  &lt;p&gt;Some more or less text&lt;/p&gt;
  &lt;a href="/" class="button"&gt;Click me&lt;/a&gt;
&lt;/div&gt;
</code></pre>

<p>and I want the following layout:</p>

<pre><code> -------------------
|heading 1          |
|heading 2          | 
|paragraph text     |
|can have many      |
|rows               |
|                   |
|                   |
|                   | 
|link-button        |
 -------------------
</code></pre>

<p>Regardless how much text is in the <code>p</code> I want to stick the <code>.button</code> always at the bottom without taking it out of the flow. I've heard this can be achievable with Flexbox but I can't get it to work.</p>


Align an element to bottom with flexbox

容器

我和几个孩子有一个div：<div class="content">  <h1>heading 1</h1>  <h2>heading 2</h2>  <p>Some more or less text</p>  <a href="/" class="button">Click me</a></div>我想要下面的布局...

问使用flexbox将元素与底部对齐
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用flexbox将元素与底部对齐EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用flexbox将元素与底部对齐
EN