Platzieren Sie ein Div in der unteren rechten Ecke in einer Spalte

Ich versuche, ein div an der unteren rechten Ecke innerhalb einer bestimmten Spalte auszurichten, aber alle stattdessen richtet es in der unteren rechten Ecke des Hauptelternteils aus.Platzieren Sie ein Div in der unteren rechten Ecke in einer Spalte

https://jsfiddle.net/jonnijonnason/L9vg468g/

Wenn Sie die Geige überprüfen, möchte ich es unter dem Bild auszurichten.

HTML

<html> 

<head> 
    <link rel="stylesheet" type="text/css" href="style.css" /> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
    <meta name="viewport" content="width=device-width" /> 
    <title>Arbetsprov | Baldvin Haraldsson</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 

</head> 

<body> 
    <div class="page"> 
     <div class="row"> 
      <div class="item"> 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed congue enim sed tristique interdum. Integer id lectus et risus pulvinar ornare. Donec congue tortor non risus ullamcorper vestibulum. Nullam in hendrerit tellus. Vestibulum lorem nulla, maximus non pretium a, tincidunt id quam. Donec quis sollicitudin urna, sed sagittis purus. Pellentesque sapien libero, blandit a nunc in, iaculis viverra ipsum</p> 

      </div> 
      <div class="item"> 
       <p>Nullam maximus pretium arcu at sodales. Sed id venenatis ante. Nullam sollicitudin id nisl quis dictum. Duis imperdiet diam at nibh laoreet egestas. Integer volutpat, dolor a pulvinar mollis, nisl lorem hendrerit tortor, sit amet posuere ante odio quis lorem. Vivamus luctus sem quis eros elementum pretium. Sed facilisis sem at velit euismod pretium. Maecenas posuere sapien elit, at accumsan orci pretium non. Suspendisse id sem nisi.</p> 
      </div> 
      <div class="item"> 
       <H3>Image</H3> 
       <img src="https://upload.wikimedia.org/wikipedia/commons/8/88/Stockholm_Port.jpg" width="140px" height = "140px" /> 

Donec bibendum nibh a odio venenatis, vel ultricies turpis varius. Vestibulum varius sollicitudin rutrum. Nam eleifend ac nisl non aliquet. Donec vel scelerisque sapien. Donec ultrices vel neque ut bibendum. Suspendisse bibendum, ex sed congue dapibus, nibh magna malesuada dolor, at scelerisque dolor ex quis lectus. Curabitur rhoncus elit efficitur hendrerit malesuada. Morbi condimentum convallis laoreet. 
       <div class = "foo">Read More</div> 

      </div> 
     </div> 
    </div> 
</body> 

</html>

CSS

@charset "UTF-8"; 
.item { 
    width: 33%; 
    background: rgba(0, 0, 0, 0.1); 
    display: table-cell; 
} 

.row { 
    border: 1px solid red; 
    display: table; 
    border-spacing: 20px; 
} 

.page { 
    max-width: 900px; 
    margin: 0px auto 0px auto; 
    position: relative; 
    background-color: #fff; 
} 

img { 
    float: right; 
    margin: 0 0 10px 10px; 
    padding: 10px; 
} 

.foo { 
    font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", "sans serif"; 
    color: #fff; 
    text-align: center; 
vertical-align: middle; 
line-height: 50px; 
    background-color: #4a4a4a; 
    height: 50px; 
    width: 162px; 
    position: absolute; 
    bottom: 0; 
    right: 0; 
}

Quelle

2016-06-11 theOGloc

Add '.item {position: relative;}' https://jsfiddle.net/L9vg468g/2/ –

@theOGloc Hallo habe die Antwort Arbeit? Ich habe einige weitere Informationen für Ihre Bequemlichkeit hinzugefügt. Kann ich noch etwas helfen? Danke und Prost :) –

In der <div class="item"> Spalte eines position:relative;

Der Knopf nach innen hat eine absolute Position, so dass es auf das nächste übergeordnete Element ist relativ mit relativer (oder absoluter) Position Ionisation.

Auch ist es nicht zu machen, den Text überlappen Sie auch padding-bottom einstellen

.item.contains-button { 
    position:relative; 
    padding-bottom:60px; 
}

Ihre aktualisierte JSFiddle

Quelle

2016-06-11 11:18:58

Inline-Stile, schlechte Idee –

@MuhammadUsman Bruder, es war nur ein Beispiel und Inline-Styling ist wirklich kein Grund zum Downvote ... Ich glaube, er weiß, wie man es in eine Klasse selbst ändern, wenn er seit dem wünscht Er hat Unterricht in seiner Hand genommen ... jedenfalls habe ich es für dich aktualisiert –

Was Sie tun müssen, nur Position: relative; zur letzten Spalte hinzufügen wird. Dies wird machen Lesen Sie mehr div an der unteren rechten Ecke der direkten Eltern DIV anstelle der Haupt DIV sein.

Aktualisiert jsFiddle: https://jsfiddle.net/L9vg468g/4/

HTML:

<body> 
    <div class="page"> 
     <div class="row"> 
      <div class="item"> 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed congue enim sed tristique interdum. Integer id lectus et risus pulvinar ornare. Donec congue tortor non risus ullamcorper vestibulum. Nullam in hendrerit tellus. Vestibulum lorem nulla, maximus non pretium a, tincidunt id quam. Donec quis sollicitudin urna, sed sagittis purus. Pellentesque sapien libero, blandit a nunc in, iaculis viverra ipsum</p> 

      </div> 
      <div class="item"> 
       <p>Nullam maximus pretium arcu at sodales. Sed id venenatis ante. Nullam sollicitudin id nisl quis dictum. Duis imperdiet diam at nibh laoreet egestas. Integer volutpat, dolor a pulvinar mollis, nisl lorem hendrerit tortor, sit amet posuere ante odio quis lorem. Vivamus luctus sem quis eros elementum pretium. Sed facilisis sem at velit euismod pretium. Maecenas posuere sapien elit, at accumsan orci pretium non. Suspendisse id sem nisi.</p> 
      </div> 
      <div class="item lastcol"> 
       <H3>Image</H3> 
       <img src="https://upload.wikimedia.org/wikipedia/commons/8/88/Stockholm_Port.jpg" width="140px" height = "140px" /> 

Donec bibendum nibh a odio venenatis, vel ultricies turpis varius. Vestibulum varius sollicitudin rutrum. Nam eleifend ac nisl non aliquet. Donec vel scelerisque sapien. Donec ultrices vel neque ut bibendum. Suspendisse bibendum, ex sed congue dapibus, nibh magna malesuada dolor, at scelerisque dolor ex quis lectus. Curabitur rhoncus elit efficitur hendrerit malesuada. Morbi condimentum convallis laoreet. 
       <div class = "foo">Read More</div> 

      </div> 
     </div> 
    </div> 
</body>

CSS:

@charset "UTF-8"; 
.item { 
    width: 33%; 
    background: rgba(0, 0, 0, 0.1); 
    display: table-cell; 
    position: relative; 
} 
.item.lastcol { 
    position: relative; 
} 
.row { 
    border: 1px solid red; 
    display: table; 
    border-spacing: 20px; 
} 

.page { 
    max-width: 900px; 
    margin: 0px auto 0px auto; 
    position: relative; 
    background-color: #fff; 
} 

img { 
    float: right; 
    margin: 0 0 10px 10px; 
    padding: 10px; 
} 

.foo { 
    font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", "sans serif"; 
    color: #fff; 
    text-align: center; 
vertical-align: middle; 
line-height: 50px; 
    background-color: #4a4a4a; 
    height: 50px; 
    width: 162px; 
    position: absolute; 
    bottom: 0; 
    right: 0; 
}

Quelle

2016-06-11 11:30:17

Wie Sie anderen zwei Spalten Beschreibung innerhalb Absatz-Tag gelegt haben, können Sie Drittel halten Beschreibung auch in einem Absatz und es kann durch usin erreichbar sein g css flexbox, wenn Ihr Browser IE10 + unterstützt.

Aktualisierter Code unten.

.item { 
 
    width: 33%; 
 
    background: rgba(0, 0, 0, 0.1); 
 
    display: table-cell; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
.row { 
 
    border: 1px solid red; 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex-wrap: wrap; 
 
    border-spacing: 20px; 
 
} 
 

 
.page { 
 
    max-width: 900px; 
 
    margin: 0px auto 0px auto; 
 
    position: relative; 
 
    background-color: #fff; 
 
} 
 

 
img { 
 
    float: right; 
 
    margin: 0 0 10px 10px; 
 
    padding: 10px; 
 
} 
 

 
.foo { 
 
    font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", "sans serif"; 
 
    color: #fff; 
 
    text-align: center; 
 
vertical-align: middle; 
 
line-height: 50px; 
 
    background-color: #4a4a4a; 
 
    height: 50px; 
 
    width: 162px; 
 
    position: relative; 
 
    bottom: 0; 
 
    right: 0; 
 
} 
 
.item h3 { 
 
\t order: 1; 
 
} 
 
.item img {order: 2;} 
 
.item div {order: 3;} 
 
.item p {order: 4;}

<html> 
 

 
<head> 
 
    <link rel="stylesheet" type="text/css" href="style.css" /> 
 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
 
    <meta name="viewport" content="width=device-width" /> 
 
    <title>Arbetsprov | Baldvin Haraldsson</title> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
 

 
</head> 
 

 
<body> 
 
    <div class="page"> 
 
     <div class="row"> 
 
      <div class="item"> 
 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed congue enim sed tristique interdum. Integer id lectus et risus pulvinar ornare. Donec congue tortor non risus ullamcorper vestibulum. Nullam in hendrerit tellus. Vestibulum lorem nulla, maximus non pretium a, tincidunt id quam. Donec quis sollicitudin urna, sed sagittis purus. Pellentesque sapien libero, blandit a nunc in, iaculis viverra ipsum</p> 
 
       
 
      </div> 
 
      <div class="item"> 
 
       <p>Nullam maximus pretium arcu at sodales. Sed id venenatis ante. Nullam sollicitudin id nisl quis dictum. Duis imperdiet diam at nibh laoreet egestas. Integer volutpat, dolor a pulvinar mollis, nisl lorem hendrerit tortor, sit amet posuere ante odio quis lorem. Vivamus luctus sem quis eros elementum pretium. Sed facilisis sem at velit euismod pretium. Maecenas posuere sapien elit, at accumsan orci pretium non. Suspendisse id sem nisi.</p> 
 
      </div> 
 
      <div class="item lastcol"> 
 
       <H3>Image</H3> 
 
       <img src="https://upload.wikimedia.org/wikipedia/commons/8/88/Stockholm_Port.jpg" width="140px" height = "140px" /> 
 
       
 
<p>Donec bibendum nibh a odio venenatis, vel ultricies turpis varius. Vestibulum varius sollicitudin rutrum. Nam eleifend ac nisl non aliquet. Donec vel scelerisque sapien. Donec ultrices vel neque ut bibendum. Suspendisse bibendum, ex sed congue dapibus, nibh magna malesuada dolor, at scelerisque dolor ex quis lectus. Curabitur rhoncus elit efficitur hendrerit malesuada. Morbi condimentum convallis laoreet.</p> 
 
       <div class = "foo">Read More</div> 
 

 
      </div> 
 
     </div> 
 
    </div> 
 
</body> 
 

 
</html>

Quelle

2016-06-11 11:57:42 San

Platzieren Sie ein Div in der unteren rechten Ecke in einer Spalte

Antwort

Verwandte Themen