按钮位于主 div 底部而不是内部 div 内。

huangapple
go评论97阅读模式
英文:

Button positioned at bottom of main div instead of inner Div

问题

我有一个需要放在卡片底部的"注册"按钮，但是不知何故使用绝对定位（bottom: 0）会将其放在主（第一个）div的底部。不确定该如何将其放在卡片底部：

<STYle>
.cardHorizontal {
  cursor: default;
  display:inline-block;
  transition: 0.3s;
  width: 40%;
  margin-right: 20px;
}
</STYle>
<div style="height: 2000px; background-color: #F8F6F7;">
    <div style="margin-left: 20px;">
        <br><br>
        <!-- 卡片 #1 -->
        <div class="cardHorizontal" style="width: 290px;">
          <a href="#" target="_blank">
          <img src="https://www.jquery-az.com/html/images/banana.jpg" style="width:50%; border-radius: 20px; margin: auto; display:block;">
          </a>
          <div class="container">
            <h3><b>卡片标题</b></h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum interdum bibendum arcu quis molestie. Duis at pretium justo, at egestas leo. Quisque gravida, est sit amet blandit sagittis, lorem sem iaculis diam, nec facilisis mauris arcu quis orci. Etiam eget ullamcorper ipsum. Maecenas eu nulla ac quam aliquet bibendum vitae vitae est.</p>
            <p style="font-size: 16px"><b>日期：2050年1月</b></p>
            <a href="#">阅读更多</a>
          </div>
          <button style="background-color: #6D925C; color: white; height: 50px; width: 150px; padding: 0; border: none;" type="button">注册</button>
        </div>
    </div>
</div>

有什么建议吗？

谢谢

英文:

I have this Register button that needs to be positioned at the bottom of the card, but somehow using position absolute (bottom: 0) places it into the bottom of the main (first) div. Not sure what to do to place it at the bottom of the card:

    <STYle>
    .cardHorizontal {
      cursor: default;
      display:inline-block;
      transition: 0.3s;
      width: 40%;
      margin-right: 20px;
    }
    </STYle>
    <div style="height: 2000px; background-color: #F8F6F7;">
        <div style="margin-left: 20px;">
            <br><br>
            <!-- Card #1 -->
            <div class="cardHorizontal" style="width: 290px;">
              <a href="#" target="_blank">
              <img src="https://www.jquery-az.com/html/images/banana.jpg" style="width:50%; border-radius: 20px; margin: auto; display:block;">
              </a>
              <div class="container">
                <h3><b>Card Title</b></h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum interdum bibendum arcu quis molestie. Duis at pretium justo, at egestas leo. Quisque gravida, est sit amet blandit sagittis, lorem sem iaculis diam, nec facilisis mauris arcu quis orci. Etiam eget ullamcorper ipsum. Maecenas eu nulla ac quam aliquet bibendum vitae vitae est.</p>
                <p style="font-size: 16px"><b>Date: January 2050</b></p>
                <a href="#">Read More</a>
              </div>
              <button style="background-color: #6D925C; color: white; height: 50px; width: 150px; padding: 0; border: none;" type="button">Register</button>
            </div>
        </div>
    </div>

Any suggestion?

Thanks

答案1

得分: 1

看起来按钮在卡片容器外部，所以绝对定位不起作用。你可以尝试将按钮包裹在卡片内容的容器内部，然后使用位置属性将其定位在底部。

<style>
.cardHorizontal {
  cursor: default;
  display: inline-block;
  transition: 0.3s;
  width: 40%;
  margin-right: 20px;
  position: relative; /* 在这里添加相对定位 */
}

.registerButton {
  background-color: #6D925C;
  color: white;
  height: 50px;
  width: 150px;
  padding: 0;
  border: none;
  position: absolute;
  bottom: 0;
}
</style>
<div style="height: 2000px; background-color: #F8F6F7;">
  <div style="margin-left: 20px;">
    <br><br>
    <!-- Card #1 -->
    <div class="cardHorizontal" style="width: 290px;">
      <a href="#" target="_blank">
      <img src="https://www.jquery-az.com/html/images/banana.jpg" style="width:50%; border-radius: 20px; margin: auto; display:block;">
      </a>
      <div class="container">
        <h3><b>Card Title</b></h3>
        <p>Lorem ipsum...</p>
        <p style="font-size: 16px"><b>Date: January 2050</b></p>
        <a href="#">Read More</a>
      </div>
      <button class="registerButton" type="button">Register</button>
    </div>
  </div>
</div>

现在，registerButton 类将按钮绝对定位在卡片底部。通过在 cardHorizontal 类中添加 position: relative;，按钮将位于该卡片的底部。

英文:

Looks like the button is outside the card container, so the absolute position is not working as intended. You can try to wrap the button inside the container where the rest of the card's content is, and then use the position properties to position it at the bottom.

&lt;style&gt;
.cardHorizontal {
  cursor: default;
  display: inline-block;
  transition: 0.3s;
  width: 40%;
  margin-right: 20px;
  position: relative; /* Add relative positioning here */
}

.registerButton {
  background-color: #6D925C;
  color: white;
  height: 50px;
  width: 150px;
  padding: 0;
  border: none;
  position: absolute;
  bottom: 0;
}
&lt;/style&gt;
&lt;div style=&quot;height: 2000px; background-color: #F8F6F7;&quot;&gt;
  &lt;div style=&quot;margin-left: 20px;&quot;&gt;
    &lt;br&gt;&lt;br&gt;
    &lt;!-- Card #1 --&gt;
    &lt;div class=&quot;cardHorizontal&quot; style=&quot;width: 290px;&quot;&gt;
      &lt;a href=&quot;#&quot; target=&quot;_blank&quot;&gt;
      &lt;img src=&quot;https://www.jquery-az.com/html/images/banana.jpg&quot; style=&quot;width:50%; border-radius: 20px; margin: auto; display:block;&quot;&gt;
      &lt;/a&gt;
      &lt;div class=&quot;container&quot;&gt;
        &lt;h3&gt;&lt;b&gt;Card Title&lt;/b&gt;&lt;/h3&gt;
        &lt;p&gt;Lorem ipsum...&lt;/p&gt;
        &lt;p style=&quot;font-size: 16px&quot;&gt;&lt;b&gt;Date: January 2050&lt;/b&gt;&lt;/p&gt;
        &lt;a href=&quot;#&quot;&gt;Read More&lt;/a&gt;
      &lt;/div&gt;
      &lt;button class=&quot;registerButton&quot; type=&quot;button&quot;&gt;Register&lt;/button&gt; &lt;!-- Use the class here --&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

Now, the registerButton class gives the button an absolute position at the bottom of the card. By adding position: relative; to the cardHorizontal class, the button will be positioned at the bottom of that card.

答案2

得分: 1

<!DOCTYPE html>
<html>
<head>
<title>页面标题</title>
</head>
<body>

<style>
  .cardHorizontal {
    cursor: default;
    display: inline-block;
    transition: 0.3s;
    width: 40%;
    margin-right: 20px;
    position: relative; /* 添加此行 */
  }
  
  .container {
    flex: 1; /* 添加此行 */
  }
  
  .button-container {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 0;
  }
</style>
<div style="height: 2000px; background-color: #F8F6F7;">
  <div style="margin-left: 20px;">
    <br><br>
    <!-- 卡片 #1 -->
    <div class="cardHorizontal" style="width: 290px;">
      <a href="#" target="_blank">
        <img src="https://www.jquery-az.com/html/images/banana.jpg" style="width:50%; border-radius: 20px; margin: auto; display:block;">
      </a>
      <div class="container">
        <h3><b>卡片标题</b></h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum interdum bibendum arcu quis molestie. Duis at pretium justo, at egestas leo. Quisque gravida, est sit amet blandit sagittis, lorem sem iaculis diam, nec facilisis mauris arcu quis orci. Etiam eget ullamcorper ipsum. Maecenas eu nulla ac quam aliquet bibendum vitae vitae est.</p>
        <p style="font-size: 16px"><b>日期：2050年1月</b></p>
        <a href="#">阅读更多</a>
      </div>
      <div class="button-container">
        <button style="background-color: #6D925C; color: white; height: 50px; width: 150px; padding: 0; border: none;" type="button">注册</button>
      </div>
    </div>
  </div>
</div>
</body>
</html>
英文: 
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Page Title&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;style&gt;
.cardHorizontal {
cursor: default;
display: inline-block;
transition: 0.3s;
width: 40%;
margin-right: 20px;
position: relative; /* Add this line */
}
.container {
flex: 1; /* Add this line */
}
.button-container {
display: flex;
justify-content: flex-end;
align-items: flex-end;
position: absolute;
bottom: 0;
right: 0;
padding: 0;
}
&lt;/style&gt;
&lt;div style=&quot;height: 2000px; background-color: #F8F6F7;&quot;&gt;
&lt;div style=&quot;margin-left: 20px;&quot;&gt;
&lt;br&gt;&lt;br&gt;
&lt;!-- Card #1 --&gt;
&lt;div class=&quot;cardHorizontal&quot; style=&quot;width: 290px;&quot;&gt;
&lt;a href=&quot;#&quot; target=&quot;_blank&quot;&gt;
&lt;img src=&quot;https://www.jquery-az.com/html/images/banana.jpg&quot; style=&quot;width:50%; border-radius: 20px; margin: auto; display:block;&quot;&gt;
&lt;/a&gt;
&lt;div class=&quot;container&quot;&gt;
&lt;h3&gt;&lt;b&gt;Card Title&lt;/b&gt;&lt;/h3&gt;
&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum interdum bibendum arcu quis molestie. Duis at pretium justo, at egestas leo. Quisque gravida, est sit amet blandit sagittis, lorem sem iaculis diam, nec facilisis mauris arcu quis orci. Etiam eget ullamcorper ipsum. Maecenas eu nulla ac quam aliquet bibendum vitae vitae est.&lt;/p&gt;
&lt;p style=&quot;font-size: 16px&quot;&gt;&lt;b&gt;Date: January 2050&lt;/b&gt;&lt;/p&gt;
&lt;a href=&quot;#&quot;&gt;Read More&lt;/a&gt;
&lt;/div&gt;
&lt;div class=&quot;button-container&quot;&gt;
&lt;button style=&quot;background-color: #6D925C; color: white; height: 50px; width: 150px; padding: 0; border: none;&quot; type=&quot;button&quot;&gt;Register&lt;/button&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

huangapple
  • 本文由 发表于 2023年8月10日 22:25:42
  • 转载请务必保留本文链接：https://go.coder-hub.com/76876673.html
  • css
  • html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定