Los dos o más div diferentes de la misma altura se pueden colocar 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.
Las propiedades de visualización utilizadas se enumeran a continuació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.
- display:table-row: Esta propiedad se usa para elementos (div) que se comportan como tr.
Ejemplo 1:
html
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-align:center;
color:green;
}
body {
width:70%;
}
.container .box {
display : flex;
flex-direction : row;
}
.container .box .box-cell.box1 {
background:green;
color:white;
text-align:justify;
}
.container .box .box-cell.box2 {
background:lightgreen;
text-align:justify
}
</style>
</head>
<body>
<h1>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. 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 box2">
Also, 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. To
quickly get your articles reviewed, please refer
existing articles, their formatting style, coding
style, and try to make you are close to them.
</div>
</div>
</div>
</div>
</body>
</html>
Producción:
Ejemplo 2: este ejemplo contiene múltiples números de div colocados uno al lado del otro usando CSS.
html
<!DOCTYPE html>
<html>
<head>
<style>
.container .box {
width:540px;
margin:50px;
display:table;
}
.container .box .box-row {
display:table-row;
}
.container .box .box-cell {
display:table-cell;
border:1px solid black;
width:25%;
padding:10px;
}
</style>
</head>
<body>
<div class="container">
<div class="box">
<div class="box-row">
<div class="box-cell box1">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/Screenshot-90-2.png" alt="" />
</div>
<div class="box-cell box2">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/Screenshot-91-2.png" alt="" />
</div>
<div class="box-cell box3">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/Screenshot-94-3.png" alt="" />
</div>
<div class="box-cell box4">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/Screenshot-95-2.png" alt="" />
</div>
</div>
</div>
</div>
</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