在文本底部放置一個鏈接

Question

我有以下代碼。我正在嘗試在段落所在的位置右下方添加鏈接。

.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; 
 
    }

<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>

現在下的每個<div class="content">我在哪裏描述有關圖像，我試圖提供在該段右下方兩個環節。我在第一個描述中試圖做到這一點，但它一直在右側。但我只是希望它在背景爲白色的文本下最右邊。

Answer 1

如果你想將你鏈接到右下角下你的款，這是一個辦法做到這一點使用CSS屬性「浮動」。

.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 
}