Question

我有以下代码。我试图在段落所在的右下角添加链接。

＆＃13;

.allParent{
  background-color:gray;
    padding:10% 20%;
  }
.titleAll{
   width:100%;
   padding-top:5px;
   background-color:#fff;
   text-align:center;
 }
.titleAll h4{
   color:gray;
   margin:0;
 }
.parent {
   display: flex;
   flex-direction: row;
   padding: 10px;
    background-color:#fff;
   text-align:left;
 }

 .parent .child {
     padding-right: 10px;
     flex-grow: 1;
     width:50%;
    font-size:80%;

    }

  .parent .child:last-child {
     padding-right: 0;
   }

       .contentRight{
    position:absolute;
     bottom:30px;
    right:371px;
    }
    
           .allParent{
           background-color:gray;
    padding:10% 20%;
  }
.titleAll{
   width:100%;
   padding-top:5px;
   background-color:#fff;
   text-align:center;
 }
.titleAll h4{
   color:gray;
   margin:0;
 }
.parent {
   display: flex;
   flex-direction: row;
   padding: 10px;
    background-color:#fff;
   text-align:left;
 }

 .parent .child {
     padding-right: 10px;
     flex-grow: 1;
     width:50%;
    font-size:80%;

    }

  .parent .child:last-child {
     padding-right: 0;
   }

       .contentRight{
    position:absolute;
     bottom:30px;
    right:371px;
    }

＆＃13;

<div class="allParent">
<div class="titleAll">
  <h4>Cats description</h4>
<div>
<div class="parent">
  <div class="child">
    <div class="content">
     <img src="http://www.cutestpaw.com/wp-content/uploads/2016/02/s-Schrodinger-as-a-kitten..png"  style="width:100%">

    </div>
  </div>
  <div class="child">
    <div class="content">Cats are similar in anatomy to the other felids, with a strong flexible body, quick reflexes, sharp retractable claws, and teeth adapted to killing small prey. Cat senses fit a crepuscular and predatory ecological niche. Cats can hear sounds too faint or too high in frequency for human ears, such as those made by mice and other small animals.</div>
   <div class="contentRight"><a href="">LINK HERE</a></div>
  </div>
</div>
<div class="titleAll">
  <h4>Cats description</h4>
<div>
<div class="parent">

  <div class="child">
    <div class="content">
     <img src="http://www.cutestpaw.com/wp-content/uploads/2016/02/s-Schrodinger-as-a-kitten..png"  style="width:100%">

    </div>
  </div>
  <div class="child">
    <div class="content">Cats are similar in anatomy to the other felids, with a strong flexible body, quick reflexes, sharp retractable claws, and teeth adapted to killing small prey. Cat senses fit a crepuscular and predatory ecological niche. Cats can hear sounds too faint or too high in frequency for human ears, such as those made by mice and other small animals.</div>
  </div>
</div>
</div>

＆＃13;

现在在我描述图像的每个<div class="content">下，我试图在段落的右下角提供两个链接。我试图在第一个描述中做到这一点，但一直到右边。但我只想在背景为白色的文本下方最右下方。

Answer 1

如果您想将链接移动到段落下方的右下角，可以使用css属性“float”来执行此操作。

.allParent{
  background-color:gray;
    padding:10% 20%;
  }
.titleAll{
   width:100%;
   padding-top:5px;
   background-color:#fff;
   text-align:center;
 }
.titleAll h4{
   color:gray;
   margin:0;
 }
.parent {
   display: flex;
   flex-direction: row;
   padding: 10px;
    background-color:#fff;
   text-align:left;
 }

 .parent .child {
     padding-right: 10px;
     flex-grow: 1;
     width:50%;
    font-size:80%;

    }

  .parent .child:last-child {
     padding-right: 0;
   }

  .contentRight{
/*     position:absolute;
     bottom:30px;
    right:371px; */
    float: right; // Changes Are Here
    margin-right: 5px; // Changes Are Here
    }

<div class="allParent">
<div class="titleAll">
  <h4>Cats description</h4>
<div>
<div class="parent">
  <div class="child">
    <div class="content">
     <img src="http://www.cutestpaw.com/wp-content/uploads/2016/02/s-Schrodinger-as-a-kitten..png"  style="width:100%">

    </div>
  </div>
  <div class="child">
    <div class="content">Cats are similar in anatomy to the other felids, with a strong flexible body, quick reflexes, sharp retractable claws, and teeth adapted to killing small prey. Cat senses fit a crepuscular and predatory ecological niche. Cats can hear sounds too faint or too high in frequency for human ears, such as those made by mice and other small animals.</div>
   <div class="contentRight"><a href="">LINK HERE</a></div>
  </div>
</div>
<div class="titleAll">
  <h4>Cats description</h4>
<div>
<div class="parent">

  <div class="child">
    <div class="content">
     <img src="http://www.cutestpaw.com/wp-content/uploads/2016/02/s-Schrodinger-as-a-kitten..png"  style="width:100%">

    </div>
  </div>
  <div class="child">
    <div class="content">Cats are similar in anatomy to the other felids, with a strong flexible body, quick reflexes, sharp retractable claws, and teeth adapted to killing small prey. Cat senses fit a crepuscular and predatory ecological niche. Cats can hear sounds too faint or too high in frequency for human ears, such as those made by mice and other small animals.</div>
  </div>
</div>
</div>

Answer 2

你想要这样吗？

.allParent{
  background-color:gray;
    padding:10% 20%;
  }
.titleAll{
   width:100%;
   padding-top:5px;
   background-color:#fff;
   text-align:center;
 }
.titleAll h4{
   color:gray;
   margin:0;
 }
.parent {
   display: flex;
   flex-direction: row;
   padding: 10px;
    background-color:#fff;
   text-align:left;
 }

 .parent .child {
     padding-right: 10px;
     flex-grow: 1;
     width:50%;
    font-size:80%;

    }

  .parent .child:last-child {
     padding-right: 0;
   }

       .contentRight{
       text-align:right;
       margin-top:5px
    }

<div class="allParent">
<div class="titleAll">
  <h4>Cats description</h4>
<div>
<div class="parent">
  <div class="child">
    <div class="content">
     <img src="http://www.cutestpaw.com/wp-content/uploads/2016/02/s-Schrodinger-as-a-kitten..png"  style="width:100%">

    </div>
  </div>
  <div class="child">
    <div class="content">Cats are similar in anatomy to the other felids, with a strong flexible body, quick reflexes, sharp retractable claws, and teeth adapted to killing small prey. Cat senses fit a crepuscular and predatory ecological niche. Cats can hear sounds too faint or too high in frequency for human ears, such as those made by mice and other small animals.</div>
   <div class="contentRight"><a href="">LINK HERE</a></div>
  </div>
</div>
<div class="titleAll">
  <h4>Cats description</h4>
<div>
<div class="parent">

  <div class="child">
    <div class="content">
     <img src="http://www.cutestpaw.com/wp-content/uploads/2016/02/s-Schrodinger-as-a-kitten..png"  style="width:100%">

    </div>
  </div>
  <div class="child">
    <div class="content">Cats are similar in anatomy to the other felids, with a strong flexible body, quick reflexes, sharp retractable claws, and teeth adapted to killing small prey. Cat senses fit a crepuscular and predatory ecological niche. Cats can hear sounds too faint or too high in frequency for human ears, such as those made by mice and other small animals.</div>
  </div>
</div>
</div>

Answer 3

你正在寻找这样的东西吗？检查jsFiddle。

.contentRight{
    margin-top:15px;
    float:right;
}

Answer 4

如果要将位置设置为绝对，但是您想要将其设置为与父容器相关而不是与窗口相关，请使用：

.parent{
position:relative;
}

.child{
position:absolute;
top://top position from the parent
right://right position from the parent
}

在文本底部放置一个链接

4 个答案: