Tres o más div diferentes se pueden poner uno al lado del otro usando CSS. Use la propiedad CSS para establecer la altura y el ancho de div y use la propiedad de visualización para colocar div en formato de lado a lado.
- flotador izquierdo; Esta propiedad se usa para aquellos elementos (div) que flotarán en el lado izquierdo.
- flotar derecho; Esta propiedad se usa para aquellos elementos (div) que flotarán en el lado derecho.
Ejemplo 1: este ejemplo coloca tres div uno al lado del otro usando la propiedad float.
<!DOCTYPE html>
<html>
<head>
<!-- CSS property to place div
side by side -->
<style>
#leftbox {
float:left;
background:Red;
width:25%;
height:280px;
}
#middlebox{
float:left;
background:Green;
width:50%;
height:280px;
}
#rightbox{
float:right;
background:blue;
width:25%;
height:280px;
}
h1{
color:green;
text-align:center;
}
</style>
</head>
<body>
<div id = "boxes">
<h1>GeeksforGeeks</h1>
<div id = "leftbox">
<h2>Learn:</h2>
It is a good platform to learn programming.
It is an educational website. Prepare for
the Recruitment drive of product based
companies like Microsoft, Amazon, Adobe
etc with a free online placement preparation
course.
</div>
<div id = "middlebox">
<h2>GeeksforGeeks:</h2>
The course focuses on various MCQ's & Coding
question likely to be asked in the interviews
& make your upcoming placement season efficient
and successful.
</div>
<div id = "rightbox">
<h2>Contribute:</h2>
Any geeks can help other geeks by writing
articles on the GeeksforGeeks, publishing
articles follow few steps that are Articles
that need little modification/improvement
from reviewers are published first.
</div>
</div>
</body>
</html>
Producción:
Ejemplo 2: este ejemplo coloca tres div uno al lado del otro usando la propiedad float.
<!DOCTYPE html>
<html>
<head>
<!-- CSS style to put div side by side -->
<style type="text/css">
.container {
width:600px;
height:190px;
background-color:green;
padding-top:20px;
padding-left:15px;
padding-right:15px;
}
#st-box {
float:left;
width:180px;
height:160px;
background-color:white;
border:solid black;
}
#nd-box {
float:left;
width:180px;
height:160px;
background-color:white;
border:solid black;
margin-left:20px;
}
#rd-box {
float:right;
width:180px;
height:160px;
background-color:white;
border:solid black;
}
h1 {
color:Green;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<div class="container">
<div id="st-box">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/download-49.png
"style="width:180px; height:160px;">
</div>
<div id="nd-box">
<p>
We can create as many div as many we want side by
side with the same height and also with the
different heights.
</p>
</div>
<div id="rd-box">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/images-31.png
"style="width:180px; height:160px;">
</div>
</div>
</center>
</body>
</html>
Producción:
Ejemplo 3: otra forma de poner tres div uno al lado del otro usando la propiedad de visualización.
- pantalla:tabla; Esta propiedad se usa para elementos (div) que se comportan como una tabla.
- pantalla: tabla-celda; Esta propiedad se usa para elementos (div) que se comportan como td.
- pantalla: tabla-fila; Esta propiedad se usa para elementos (div) que se comportan como tr.
<!DOCTYPE html>
<html>
<head>
<!-- CSS style to place three div side by side -->
<style>
.container .box {
width:540px;
margin:50px;
display:table;
}
.container .box .box-row {
display:table-row;
}
.container .box .box-cell {
display:table-cell;
width:33%;
padding:10px;
}
.container .box .box-cell.box1 {
background:green;
color:white;
text-align:justify;
}
.container .box .box-cell.box2 {
background:lightgreen;
text-align:justify
}
.container .box .box-cell.box3 {
background:lime;
text-align:justify;
}
</style>
</head>
<body>
<center>
<h1 style = "color:green;">GeeksforGeeks</h1>
<div class="container">
<div class="box">
<div class="box-row">
<div class="box-cell box1">
It is a good platform to learn programming.
It is an educational website. Prepare for
the Recruitment drive of product based
companies like Microsoft, Amazon, Adobe etc
with a free online placement preparation
course.
</div>
<div class="box-cell box2">
The course focuses on various MCQ's &
Coding question likely to be asked in
the interviews & make your upcoming
placement season efficient and successful.
</div>
<div class="box-cell box3">
Any geeks can help other geeks by writing
articles on the GeeksforGeeks, publishing
articles follow few steps that are Articles
that need little modification/improvement
from reviewers are published first.
</div>
</div>
</div>
</div>
</center>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por Sabya_Samadder y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA