Put horizontal images inside a script in HTML

Question

I'm new in HTML and i'm having problems to align my images horizontally, actually they are aligning vertically. I can do this in HTMl, but when I add the script everything becames vertically.Here is my script, hope you can help me. I just posted an example of one of the four variables to be for simple for you.

    <div class="row">
  <div class="medium-0 columns-5">
    <img class="thumbnail" src="sorteo.jpg" style="width:1930px;height:350px;">
<div class="row small-up-4">
<div class="column row">
    <p id="sensor1"> </p>
    <p id="sensor2"> </p>
    <p id="sensor3"> </p>
    <p id="sensor4"> </p>
<script>

    var sensor4 = 0;

if (sensor4==1){
    document.getElementById("sensor4").innerHTML = '<div class="medium-6 columns"> <img class="thumbnail"  src="proximidad.jpg" style="width:250px;height:100px;"> </div>';
    } else {
    document.getElementById("sensor4").innerHTML = '<div class="medium-6 columns"> <img class="thumbnail"  src="azul.jpg" style="width:250px;height:100px;"> </div>';
    }       
</script>
</div>
</div>
</div>
</div>

This is how I want it to look like

  var sensor1 = 1; if (sensor1==1){ document.getElementById("sensor1").innerHTML = '<img src="motor.jpg" style="width:250px;height:100px;">'; } else { document.getElementById("sensor1").innerHTML = '<img src="azul.jpg" style="width:250px;height:100px;">'; } var sensor2 = 0; if (sensor2==1){ document.getElementById("sensor2").innerHTML = '<img class="thumbnail" align="center" src="piston.jpg" style="width:250px;height:100px;">'; } else { document.getElementById("sensor2").innerHTML = '<div class="column"> <img class="thumbnail" src="azul.jpg" style="width:250px;height:100px;"> </div>'; } var sensor3 = 1; if (sensor3==1){ document.getElementById("sensor3").innerHTML = '<div class="medium-6 columns"> <img class="thumbnail" src="retro.jpg" style="width:250px;height:100px;"> </div>'; } else { document.getElementById("sensor3").innerHTML = '<div class="medium-6 columns"> <img class="thumbnail" src="azul.jpg" style="width:250px;height:100px;"> </div>'; } var sensor4 = 0; if (sensor4==1){ document.getElementById("sensor4").innerHTML = '<div class="medium-6 columns"> <img class="thumbnail" src="proximidad.jpg" style="width:250px;height:100px;"> </div>'; } else { document.getElementById("sensor4").innerHTML = '<div class="medium-6 columns"> <img class="thumbnail" src="azul.jpg" style="width:250px;height:100px;"> </div>'; } 

  <div class="row"> <div class="medium-0 columns-5"> <img class="thumbnail" src="sorteo.jpg" style="width:1930px;height:350px;"> <div class="row small-up-4"> <div class="column"> <p id="sensor1"> </p> <p id="sensor2"> </p> <p id="sensor3"> </p> <p id="sensor4"> </p> 

this is how it looks right now

Answer 1

You need to know about CSS : display: inline-block or float: left; or display: flex;

Note : test it on your monitor... i use display: inline-block... so the content automatically falldown when the window not enough space. And that is we called "Responsive Website" after adding some meta.

 function preLoad(){ var sensor1 = 1; if (sensor1==1){ document.getElementById("sensor1").innerHTML = '<img src="motor.jpg" style="width:250px;height:100px;">'; }else{ document.getElementById("sensor1").innerHTML = '<img src="azul.jpg" style="width:250px;height:100px;">'; } var sensor2 = 0; if (sensor2==1){ document.getElementById("sensor2").innerHTML = '<img class="thumbnail" align="center" src="piston.jpg" style="width:250px;height:100px;">'; }else{ document.getElementById("sensor2").innerHTML = '<div class="column"> <img class="thumbnail" src="azul.jpg" style="width:250px;height:100px;"> </div>'; } var sensor3 = 1; if (sensor3==1){ document.getElementById("sensor3").innerHTML = '<div class="medium-6 columns"> <img class="thumbnail" src="retro.jpg" style="width:250px;height:100px;"> </div>'; }else{ document.getElementById("sensor3").innerHTML = '<div class="medium-6 columns"> <img class="thumbnail" src="azul.jpg" style="width:250px;height:100px;"> </div>'; } var sensor4 = 0; if (sensor4==1){ document.getElementById("sensor4").innerHTML = '<div class="medium-6 columns"> <img class="thumbnail" src="proximidad.jpg" style="width:250px;height:100px;"> </div>'; }else{ document.getElementById("sensor4").innerHTML = '<div class="medium-6 columns"> <img class="thumbnail" src="azul.jpg" style="width:250px;height:100px;"> </div>'; } } 

 .sensorContent{ text-align: center; } .sensorContent p{ display: inline-block; } 

 <body onload="preLoad();"> <div class="row"> <div class="medium-0 columns-5"> <img class="thumbnail" src="sorteo.jpg" style="width:1930px;height:350px;"> <div class="row small-up-4"> <div class="column row sensorContent"> <p id="sensor1"></p> <p id="sensor2"></p> <p id="sensor3"></p> <p id="sensor4"></p> </div> </div> </div> </div> </body>