position online

Navigation
1

I want to position in a row, but not over 

.caja {
  display: inline-block;
}

.uno {
  width: 10px;
  height: 10px;
  background-color: red;
}

.dos {
  width: 10px;
  height: 10px;
  background-color: blue;
}
<div class="caja">
  <div class="uno">
  </div>

  <div class="dos">


  </div>
</div>
    
asked by hubman 06.12.2017 в 16:43
source

3 answers

2

You must remove the inline-block from the parent and you can add the float: left; property to the two elements so that it floats side by side. 

.uno {
  width: 10px;
  height: 10px;
  background-color: red;
  float: left;
}

.dos {
  width: 10px;
  height: 10px;
  background-color: blue;
  float: left;
}
<div class="caja">
  <div class="uno">
  </div>

  <div class="dos">


  </div>
</div>
    
answered by 06.12.2017 / 16:50
source
3

A modern solution: 

.flexbox {
  display: flex;
}

.div {
  width: 10px;
  height: 10px; 
}

.uno { 
  background-color: red;
}

.dos {
  background-color: blue;
}
<div class="flexbox">
  <div class="div uno"></div>
  <div class="div dos"></div>
</div>
    
answered by 06.12.2017 в 17:14
3

You simply have to give the property display: inline-block; to the elements that you want to position next to each other and not to its parent element:

Note: The vertical-align property vertically aligns items that contain display: inline-block; 

.uno {
  width: 10px;
  height: 10px;
  background-color: red;
  display: inline-block;
  vertical-align: middle;
}

.dos {
  width: 10px;
  height: 10px;
  background-color: blue;
  display: inline-block;
  vertical-align: middle;
  margin-left: -4px;
}
<div class="caja">
  <div class="uno">
  </div>

  <div class="dos">


  </div>
</div>
    
answered by 06.12.2017 в 16:45
Run .sql file from php Obtain object type in c #