我希望img旁边有一个div，高度相同，同时使用页面宽度的100%

Question

所以我要做的是：

<div style="">
<img src="rootfolder_wiki/img/DeadsideGun.jpg" style="float:left; width: 50%;" id="img">
<div style="float: left; width: 50%; background-color: red; height: 100%;" id="kaka1" onload="document.this.style.height = h;"> Hello world </div>
</div>
<script type="text/javascript">
let h = 0;
function kaka() {
h = document.getElementById("img").height;
h = 20;
}
kaka1.addEventListener('load', kaka());
console.log(h);
</script>

任何帮助都是事先准备好的，请注意，我对此还很陌生。

Answer 1

与其使用float left，不如使用flex。

<div style="display: flex;">
<img src="rootfolder_wiki/img/DeadsideGun.jpg" style="width: 50%;" id="img">
<div style="background-color: red;" id="kaka1" onload="document.this.style.height = h;"> Hello world </div>
</div>

这就行了。如果你在谈论这个话题，我强烈建议你学习使用flex和grid以及CSS文件。这可能看起来很麻烦，但它的工作要比直接向html对象添加样式容易得多。