Platzieren Sie einen Link am Ende des Textes

Ich habe den folgenden Code. Ich versuche, Links rechts unten hinzuzufügen, wo der Absatz steht.Platzieren Sie einen Link am Ende des Textes

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

unter Jetzt jeder <div class="content">, wo ich über das Bild beschreibe, ich versuche, zwei Links auf der rechten unteren Ecke des Absatzes zu liefern. Ich habe versucht, dies in der ersten Beschreibung zu tun, aber es ist ganz nach rechts. Aber ich will es nur am weitesten unten unter dem Text, wo der Hintergrund weiß ist.

Quelle

2017-09-01 user3750720

Wenn Sie wollten Ihren Link auf die rechte untere Ecke unter dem Absatz dies ist ein Weg, sich zu bewegen, es zu tun, um die CSS-Eigenschaft ‚schweben‘ verwenden.

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

Quelle

2017-09-01 18:07:13

Wollen Sie es so?

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

Quelle

2017-09-01 18:04:02

Dank für die Anregung. Aber Link hier sollte nur auf der rechten Seite des weißen Hintergrunds und direkt unter dem Text sein. Ich sehe in Ihrem Vorschlag seine linke Seite und weit unten unter dem Text – user3750720

@ user3750720 bearbeitet –

@ user3750720 Fügen Sie dies zum style Ihre Anker-Tag "display: block; float: right;" –

Suchen Sie dieser Suchbegriffe? Überprüfen Sie jsFiddle.

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

Quelle

2017-09-01 18:11:30

, wenn Sie die Position absolut setzen wollen, aber Sie wollen es mit dem übergeordneten Container in Beziehung setzen und nicht auf das Fenster, benutzen Sie dies:

.parent{ 
position:relative; 
} 

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

Quelle

2017-09-01 18:19:58

Platzieren Sie einen Link am Ende des Textes

Antwort

Verwandte Themen