Question

如果你去这个链接：

http://benliger.webatu.com/

单击投资组合，然后单击其中一个方块，您将看到我的意思。即使它的宽度为100％，div也比它的父级大40px？试图摆弄边界框：边框但不能让它工作......

HTML:

<div class="portfoliocontainer pagedown" style="display: block;">


<div class="portfoliopod podexpanded">
<img class="portfolioimage" src="aboutme.jpg">
<div class="portfoliopodmessage">testing 123</div>
</div>

CSS:

.portfolioimage {
width: 100%;
}

.portfoliopodmessage {

width:100%;
height:100px;
color:white;
background-color:black;
padding: 10px;
box-sizing: border-box;
display:none;
-webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;

}

.portfoliopod {
float:left;
width:287px;
margin-top:20px;
margin-left:20px;
overflow:hidden;
height: 287px;
-webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;

}

.podexpanded {
width:100% !important;

}

.portfoliocontainer {
min-width: 941px;
padding-bottom: 20px;
display: inline;
float: left;
margin: 0 auto;
background-color: rgba(250, 250, 250, 0.9);
-webkit-transform: translateY(-1500px)!important;
-ms-transform: translateY(-1500px)!important;
transform: translateY(-1500px)!important;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
max-width: 901px;
height: auto;
min-height: 800px;
border-style: solid;
border-color: rgba(128, 128, 128, 0.31);
border-width: 1px;
margin-bottom: 20px;
}

Answer 1

你必须将盒子大小添加到.podexpanded，然后css变为：

.podexpanded {
     width: 100% !important;
     box-sizing: border-box;
     padding-right: 20px;
}

并从.portfoliopod a中删除margin-left并添加padding-left，然后css变为：

.portfoliopod {
     float: left;
     width: 287px;
     margin-top: 20px;
     overflow: hidden;
     height: 287px;
     -webkit-transition: all 1s ease-in-out;
     -moz-transition: all 1s ease-in-out;
     -o-transition: all 1s ease-in-out;
     transition: all 1s ease-in-out;
     padding-left: 20px;
}

Answer 2

您必须考虑margin-left:20px上样式的.portfoliopod。

当用户在应用样式margin-left:20px时点击图片时取出.podexpanded并更改内部图片的宽度，同时将margin: 0 auto; display:block;应用于图片中的图片扩展的pod。

.podexpanded {
    margin-left: 0;
    width: 100% !important;
}

.podexpanded img {
    display: block;
    margin: 0 auto;
    width: 95%;
}

宽度比父div大100％

2 个答案: