点击触发时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>