将水平图像放入HTML脚本中

Question

我是HTML的新手，在水平对齐图像时遇到问题，实际上它们在垂直对齐。 我可以在HTMl中执行此操作，但是当我添加脚本时，所有内容都垂直变为了。这是我的脚本，希望您能为我提供帮助。 我刚刚发布了一个为您简化的四个变量之一的示例。

    <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>

这就是我想要的样子

  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> 

这就是现在的样子

Answer 1

您需要了解CSS：display：inline-block或float：left; 或显示：flex;

注意：在您的显示器上对其进行测试...我使用display：inline-block ...，因此当窗口空间不足时，内容会自动下降。 在添加一些元数据之后，我们将其称为“响应式网站”。

 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>