如何减少占用过多空间的HTML元素的大小-

Question

我希望页面上的两个div对齐，我在两个元素的css中都设置了{display：inline-block;}，但仍然无法正常工作，我在chrome中抬起头来，发现元素非常大（900x330），这可能是阻止元素对齐的原因

HTML：

<div id="shopmain" align="center" style="margin-bottom:30px;margin-top:10px;align-items: center;">

    <div id="shop1" width="25%">

        <img id="1" src="images/shop/1/1-1.jpg" style="width:20%">

        <p style="color:#974A2B;margin-bottom:1px;">TRIANGLE I</p>
        <p style="color:#974A2B;margin-top:1px;">88,99€</p>

        <button style="height:15px;width:15px;padding:0;border:none;background:none;" id="button1-1" onclick="document.getElementById('1').src='images/shop/1/1-1.jpg'">1-1</button>

            <script type="text/javascript">
            var buttons = document.getElementById("button1-1");
            buttons.innerHTML = '<img src="images/shop/1/1-1c.jpg" />';
            </script>

        <button style="height:15px;width:15px;padding:0;border:none;background:none;" id="button1-2" onclick="document.getElementById('1').src='images/shop/1/1-2.jpg'">1-2</button>

            <script type="text/javascript">
            var buttons = document.getElementById("button1-2");
            buttons.innerHTML = '<img src="images/shop/1/1-2c.jpg" />';
            </script>

        <button style="height:15px;width:15px;padding:0;border:none;background:none;" id="button1-3" onclick="document.getElementById('1').src='images/shop/1/1-3.jpg'">1-3</button>

            <script type="text/javascript">
            var buttons = document.getElementById("button1-3");
            buttons.innerHTML = '<img src="images/shop/1/1-3c.jpg" />';
            </script>

        <button style="height:15px;width:15px;padding:0;border:none;background:none;" id="button1-4" onclick="document.getElementById('1').src='images/shop/1/1-4.jpg'">1-4</button>

            <script type="text/javascript">
            var buttons = document.getElementById("button1-4");
            buttons.innerHTML = '<img src="images/shop/1/1-4c.jpg" />';
            </script>

    </div>
    <div id="shop2" width="25%">

        <img id="2" src="images/shop/2/2-1.jpg" style="width:20%">

        <p style="color:#974A2B;margin-bottom:1px;">TRIANGLE II</p>
        <p style="color:#974A2B;margin-top:1px;">88,99€</p>

        <button style="height:15px;width:15px;padding:0;border:none;background:none;" id="button2-1" onclick="document.getElementById('2').src='images/shop/2/2-1.jpg'">2-1</button>

            <script type="text/javascript">
            var buttons = document.getElementById("button2-1");
            buttons.innerHTML = '<img src="images/shop/2/2-1c.jpg" />';
            </script>

        <button style="height:15px;width:15px;padding:0;border:none;background:none;" id="button2-2" onclick="document.getElementById('2').src='images/shop/2/2-2.jpg'">2-2</button>

            <script type="text/javascript">
            var buttons = document.getElementById("button2-2");
            buttons.innerHTML = '<img src="images/shop/2/2-2c.jpg" />';
            </script>

        <button style="height:15px;width:15px;padding:0;border:none;background:none;" id="button2-3" onclick="document.getElementById('2').src='images/shop/2/2-3.jpg'">2-3</button>

            <script type="text/javascript">
            var buttons = document.getElementById("button2-3");
            buttons.innerHTML = '<img src="images/shop/2/2-3c.jpg" />';
            </script>

    </div>

</div><br/>

CSS：

#button1-1 {display:inline-block;} 
#button1-2 {display:inline-block;} 
#button1-3 {display:inline-block;} 
#button1-4 {display:inline-block;} 
#button2-1 {display:inline-block;} 
#button2-2 {display:inline-block;} 
#button2-3 {display:inline-block;} 
#shopmain {display:inline-block;} 
#shop1 {display:inline-block;margin-right:10px;margin-left:10px;} 
#shop2 {display:inline-block;margin-right:10px;margin-left:10px;} 

如果有帮助，则所有图像的默认尺寸为900x1350，但图像在屏幕上显示为180x270。

谢谢你的帮助。

Answer 1

如果您可以张贴笔，这样我们就可以看到问题，这将有所帮助。 但是，我的建议是使用最大宽度而不是宽度。