alinear 2 divs uno al lado del otro ejemplo de código

Ejemplo 1: cómo alinear dos divs uno al lado del otro

.wrapper 
    display: flex;
    flex-wrap: wrap;


.wrapper>div 
    flex: 1 1 150px;
    height: 500px;

Ejemplo 2: div al lado del otro

.float-container 
    border: 3px solid #fff;
    padding: 20px;


.float-child 
    width: 50%;
    float: left;
    padding: 20px;
    border: 2px solid red;

<divclass="float-container"><divclass="float-child"><divclass="green">Float Column 1div>div><divclass="float-child"><divclass="blue">Float Column 2div>div>div>

Ejemplo 3: colocar div uno al lado del otro

<divstyle="width:100%;display: table;"><divstyle="display: table-row"><divstyle="width:600px;display: table-cell;"> Left div><divstyle="display: table-cell;"> Right div>div>div>

Ejemplo 4: colocar div uno al lado del otro

<divstyle="width:100%;overflow: hidden;"><divstyle="width:600px;float: left;"> Left div><divstyle="margin-left:620px;"> Right div>div>

Ejemplo 5: mostrar dos divs uno al lado del otro flexbox

.float-container 
    border: 3px solid #fff;
    padding: 20px;


.float-child 
    width: 50%;
    float: left;
    padding: 20px;
    border: 2px solid red;

Ejemplo 6: posición css lado a lado

/************ How to position elements side by side? ***************/

/* We can use the property "display: inline" to place blocks of elements 
side by side, however, this does not allow an aesthetic alignment of all 
elements and we can't position a stack or group of two or more blocks 
beside another block. For example, placing a header and a paragraph on 
the left side of an image. For that, we use the "float" property.
This tells the other elements to make room for the element that is 
"floating" in a certain position, with the minimum disturbance to the 
flow of the document (packing everything tightly) */

img 
  float: left;   /* The image will float on the left side of the text*/


h3 
  text-align: left;


p 
  text-align: left;  



/****************** How to isolate this effect? **********************/

/* For example, in case we want to keep the image and the header side 
by side, but making sure the paragraph is kept below the image. In this 
case, we can simply use a property that will prevent that any other 
element can be placed on the left of the <p> element. That way, as the 
pieces are stack throughout the document, the browser will simply put 
the <p> element below the "floating" image. */

img 
  float: left;


h3 
  text-align: left;


p 
  text-align: left;
  clear: left;     /* This will stop any other element from being placed on it's left side */

Sección de Reseñas y Valoraciones

---

---

Utiliza Nuestro Buscador