xx5ko xx5ko - 1 year ago 39
HTML Question

How to display inline <span> inside <div>?

How can I display inline spans inside a div element? I would like to show them inline, and automatically regulating their sizes and the space that they take equally, depends the user's screen, and to be behind all others div elements.



body {

width: auto;
height: auto;
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
overflow: scroll;

.whole {
width: 100%;
height: 400px;
display: inline-block;
margin: 0px 0px 0px 240px;
z-index: -1;
position: relative;
}

#main {
background-color: #212121;
width: 50%;
height: 400px;
display: block;

}

#second-main {
background-color: #424242;
width: 50%;
height: 400px;
display: block;
}

#third-main {
background-color: #616161;
width: 50%;
height: 400px;
display: block;
}

#fourth-main {
background-color: #757575;
width: 50%;
height: 400px;
display: block;
}

<div class = "whole">
<span id="main">
<p></p>
</span>

<span id="second-main">
<p></p>
</span>

<span id="third-main">
<p></p>
</span>

<span id="fourth-main">
<p></p>
</span>

<span id="fifth-main">
<p></p>
</span>
</div>




Answer Source

<span> is inline by default, and <div> is block by default. But in your CSS you're overwriting those default styles with display: block (in #main, etc). If you want them to resize as the screen does, and be inline, a better way overall is just to use flexbox:

HTML:

<div class="whole">
  <span id="main">
      <p></p>
  </span>
  <span id="second-main">
      <p></p>
  </span>
  <span id="third-main">
      <p></p>
  </span>
  <span id="fourth-main">
      <p></p>
  </span>
  <span id="fifth-main">
      <p></p>
  </span>
</div>

CSS:

body {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
  overflow: scroll;
}

.whole {
  width: 100%;
  height: 400px;
  -ms-display: flexbox;
  display: flex;
  margin: 0px 0px 0px 240px;
}

.whole > span {
  -ms-flex: 1;
  flex: 1;
  height: 100%;
}

#main { 
  background-color: #212121;
}

#second-main { 
  background-color: #424242;
}

#third-main { 
  background-color: #616161;
}

#fourth-main { 
  background-color: #757575;
}

(you were also missing a closing CSS bracket for body, and your font-size: 100% was being overwritten in the very next line by a shorthand font rule)

Here is a working fiddle: https://jsfiddle.net/tceqx58x/

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download