以下代码片段用于在用户单击图像时，将静态图像替换为由Java脚本函数加载的窗口.问题是加载的Java代码块不考虑宽度和高度，如果它有div个元素，它就会被挤压到左边.
我做错了什么？
<div style="display: flex; justify-content: space-between;">
<div style="text-align: center;">
<!-- Your image -->
<img id="myImage" src="https://raw.githubusercontent.com/ucc23/test/main/berkeley29.webp" alt="Clickable Image" style="width:355px;height:250px; cursor: pointer;">
<!-- Div to contain Aladin Lite viewer -->
<div id="aladin-lite-div" style="width:355;height:250"></div>
<!-- Aladin Lite script (will be loaded after the image is clicked) -->
<script type="text/javascript">
// Function to load Aladin Lite after image click and hide the image
function loadAladinLiteAndHideImage() {
// Dynamically load the Aladin Lite script
let aladinScript = document.createElement('script');
aladinScript.src = "https://aladin.cds.unistra.fr/AladinLite/api/v3/latest/aladin.js";
aladinScript.charset = "utf-8";
aladinScript.onload = function () {
A.init.then(() => {
let aladin = A.aladin('#aladin-lite-div', {survey:"P/DSS2/color", fov:0.1, target: "103.269 16.929"});
// Remove the image
document.getElementById('myImage').remove();
// Hide the image
//document.getElementById('myImage').style.visibility = "hidden";
// Show the Aladin Lite viewer
document.getElementById('aladin-lite-div').style.display = 'block';
});
};
document.head.appendChild(aladinScript);
}
// Event listener for image click
document.getElementById('myImage').addEventListener('click', loadAladinLiteAndHideImage);
</script>
</div>
<!-- Left block -->
<table style="text-align: center; width:355px;height:250px;">
<!-- Row 1 (title) -->
<tr>
<td colspan="5"><h3>Table title</h3></td>
</tr>
<!-- Row 2 -->
<tr>
<th><a>C1</a></th>
<th><a>C2</a></th>
<th><a>C3</a></th>
<th><a>C4</a></th>
<th><a>C5</a></th>
</tr>
<!-- Row 3 -->
<tr>
<td>1.0</td>
<td>0.52</td>
<td>9.7</td>
<td>534</td>
<td>3.0</td>
</tr>
</table>
</div>