我是 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>
最佳答案
你需要了解 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>
关于javascript - 将水平图像放入 HTML 脚本中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43722791/