Podemos configurar div con la imagen izquierda y el botón en la parte inferior mediante dos métodos de la siguiente manera:
Método 1: Usando bootstrap
Flotador izquierdo
Estas clases de utilidades flotan un componente a la izquierda o deshabilitan la flotación, en función del tamaño de la ventana gráfica actual utilizando la propiedad flotante de CSS. Se incluye !importante para eludir (evitar) problemas de especificidad. Estos utilizan los mismos puntos de interrupción de la ventana gráfica que nuestro sistema de cuadrícula.
Relativo a la posición:
Es lo mismo que la posición de la propiedad CSS: relativa .
Posición absoluta:
Es lo mismo que la posición de la propiedad CSS: absoluto .
Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,
initial-scale=1, shrink-to-fit=no"/>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity=
"sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
crossorigin="anonymous"/>
<script src=
"https://kit.fontawesome.com/577845f6a5.js"
crossorigin="anonymous">
</script>
<title>Set div with left image
</title>
<style type="text/css">
.bottom-left {
left: 0;
}
</style>
</head>
<body>
<h1 style="color: #006400;">
<br/>
GeeksforGeeks
</h1>
<div class="float-left">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200712114621/testimg.JPG"
height="150"/>
</div>
<div class="position-relative" style="color: green;">
<h1>Hey There..!!</h1>
<p><b>This is an Example..</b></p>
<p>Here I have used class float-left of
bootstrap to set div with left image.</p>
<br/>
</div>
<div class="position-relative">
<div class="position-absolute bottom-left">
<button type="button"
class="btn btn-success">
Click me!
</button>
</div>
</div>
</body>
</html>
Producción:
Nota: si su contenido es menor, coloque la etiqueta <br> al final del contenido o, de lo contrario, el botón se perderá ya que su posición es relativa al contenido.
Usando bootstrap 3 , podemos configurar div con la imagen y el botón izquierdos en la parte inferior y la imagen y el botón derechos en la parte inferior mediante un sistema de cuadrícula de arranque también de la siguiente manera:
Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,
initial-scale=1, shrink-to-fit=no"/>
<!-- Bootstrap CSS -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity=
"sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous"/>
<!-- Optional theme -->
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
integrity=
"sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"
crossorigin="anonymous" />
<!-- Latest compiled and minified JavaScript -->
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
integrity=
"sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous">
</script>
<title>Set div with left image</title>
<style type="text/css">
.bottom-left {
left: 0;
}
.bottom-right {
right: 0;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="col-md-6">
<div class="pull-right">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200712114621/testimg.JPG"
height="150" />
</div>
<div style="color: green; text-align: left;">
<h1>Hey There..!!</h1>
<p><b>This is an Example..</b></p>
<p>Here I have used class pull-right of
bootstrap to set div with right image.
</p>
<br/>
<br/>
</div>
<div class="pull-right bottom-right">
<button type="button" class="btn btn-success">
Click me!
</button>
</div>
</div>
<div class="col-md-6">
<div class="pull-left">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200712114621/testimg.JPG"
height="150" />
</div>
<div style="color: green;
text-align: right;">
<h1>Hey There..!!</h1>
<p><b>This is an Example..</b></p>
<p>
Here I have used class pull-left of
bootstrap to set div with left image.
</p>
<br/>
<br/>
</div>
<div class="pull-left bottom-left">
<button type="button"
class="btn btn-success">
Click me!
</button>
</div>
</div>
</div>
</body>
</html>
Producción:
Nota: Debido a que la salida del sistema de cuadrícula de arranque se verá diferente cuando el código se ejecute en IDE, por lo tanto, ejecute este código en su fuente.
Método 2: Usar Flexbox
Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,
initial-scale=1, shrink-to-fit=no" />
<title>Set div with left image</title>
<style type="text/css">
.flex_row {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-content: stretch;
align-items: flex-start;
}
.article {
box-sizing: border-box;
flex: 1 1 50%;
align-self: stretch;
padding: 10px;
}
.content {
box-sizing: border-box;
flex: 1 1 auto;
align-self: stretch;
padding: 0 10px;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
}
.innercontent {
flex: 1 1 auto;
align-self: stretch;
color: green;
}
.buttonBar {
flex: 0 0 auto;
}
.onRight {
text-align: left;
}
</style>
</head>
<body>
<h1 style="color: #006400;">
<br />
GeeksforGeeks
</h1>
<div class="flex_row">
<div class="article onRight flex_row">
<div class="image">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200712114621/testimg.JPG"
height="150" />
</div>
<div class="content">
<div class="innercontent">
<h1>Hey There..!!</h1>
<p>
<b>This is an Example..</b>
</p>
<p>Here I have used Flexbox model
to set div with left image
and button at bottom.
</p>
<br/>
</div>
<div class="buttonBar">
<button>Click me!</button>
</div>
</div>
</div>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por swapnitanerkar28 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA