将水平图像放在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>

This is how I want it to look like

＆＃13;

＆＃13;

	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>';
		}		

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

this is how it looks right now

Answer 1

您需要了解CSS：display：inline-block 或漂浮：左; 或显示：flex;

注意：在你的显示器上测试它...我使用display：inline-block ...所以当窗口空间不足时内容会自动降低。这就是我们称之为响应网站＆＃34;添加一些元后。

＆＃13;

＆＃13;

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>';
	}
}

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;