將水平圖像放入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>