Question

我有图像库的一些问题，我想要图像的空间右侧但不想改变主div的宽度，因为页眉和页脚具有与主div相同的宽度，所以我想在主div中调整图库。我的代码如下：

HTML：

<div class="main1">
<div class="content-box-left-bootomgrid">
    <img src="images/etower1.jpg" title="Eiffel Tower - Paris" alt="etower1" width="200" height="200">
    <p>Eiffel Tower - Paris, France</p>
</div>
<div class="content-box-left-bootomgrid">
    <img src="images/W1.jpg" title="Taj Mahal - Agra" alt="Taj Mahal" width="200" height="200">
    <p>Taj Mahal - Agra, India</p>
 </div>
<div class="content-box-left-bootomgrid" style="padding-right:0px;">
    <img src="images/harbour1.jpg" title="Harbour Bridge - Sydney" alt="harbour1" width="200" height="200">
    <p>Harbour Bridge - Sydney, Australia</p>
</div>
<div class="content-box-left-bootomgrid">
    <img src="images/Opera1.jpg" title="Opera House - Sydney" alt="Opera1" width="200" height="200">
    <p>Opera House - Sydney, Australia</p>
</div>
<div class="content-box-left-bootomgrid">
    <img src="images/Twintower1.jpg" title="Twin Towers - Kuala Lumpur" alt="Twintower1" width="200" height="200">
    <p>Twin Towers - Kuala Lumpur, Malaysia</p>
</div>
<div class="content-box-left-bootomgrid" style="padding-right:0px;">
    <img src="images/tower bridge london.jpg" title="Tower Bridge - London"  alt="Tower Bridge_London" width="200" height="200">
    <p>Tower Bridge - London, UK</p>
</div>

CSS：

.main1{width: 73%; margin: 0 auto;border: 1px solid red;}

.content-box-left-bootomgrid{width:32%;float:left;}

.content-box-left-bootomgrid p{
font-family: Times New Roman, Helvetica, sans-serif;
color: #000000;
font-size: 0.875em;
padding: 0.5em 0;
line-height: 1.8em;
text-align:center;}

.content-box-left-bootomgrid img{
background:#000000;
padding:6px;
display:block;
width: 96%;
transition: 0.5s ease;
-o-transition: 0.5s ease;
-webkit-transition: 0.5s ease;}

.content-box-left-bootomgrid:hover img{
background:#71D6EA;}

Answer 1

尝试box-sizing: border-box。它模仿ie盒模型。 https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

在图库中，图像调整不正确

1 个答案: