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

	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

你需要了解 CSS:display: inline-block或 float :左；或显示: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>