0
我想在頁面上對齊兩個div,我在兩個元素的CSS中設置了{display:inline-block;}但它仍然沒有「T工作,我在鉻擡頭一看,我發現元素的大小是巨大的(900x330),而且它可能什麼從得到對準停止元素如何減少佔用太多空間的HTML元素的大小
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。
感謝您的幫助。