将水平图像放入HTML脚本中

Question

我是HTML中的新手，我的图像水平对齐有问题，实际上它们是垂直对齐的。我可以在HTMl中做到这一点，但是当我添加脚本时，所有属于vertically.Here的东西都是我的脚本，希望您能帮助我。我刚刚发布了一个例子，其中一个变量对你来说很简单。

    <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:内联块或浮动:左侧；或显示: flex；

注:在你的显示器上测试它.我用显示器:内嵌块.因此，当窗口空间不足时，内容会自动下降。也就是说，在添加了一些元之后，我们称之为“响应性网站”。

​

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>

​