Question

所以我试图让divs完全适合使用固定像素宽度和高度的包装。虽然我对像素如何正确加起来感到困惑。

HTML

    <div class="div1">
        <img src="image.png" alt="image" class="image">
    </div>

    <div class="div2">

    </div>

    <div class="div3">

    </div>

    <div class="div4">

    </div>
</div>

CSS

#wrapper {
    height: 455px;
    width: 690px;
    background-color: grey;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    overflow: hidden;
    white-space:nowrap;
}

.div1 {
    display: inline-block;
    margin-bottom: 10px;
    vertical-align:top;
}

 .image {
    max-width: 172px;
    max-height: 172px;
    border-radius: 2%;
    border: 4px solid blue;
}

.div2 {
    height: 172px;
    width: 277px;
    border: 4px solid blue;
    display: inline-block;
    margin-left: 30px;
    background-color: purple;
}

.div3 {
    width: 159px;
    height: 188px;
    display: inline-block;
    margin-left: 30px;
    border-left: 4px solid blue;
    border-right: 2px solid blue;
    border-top: 2px solid blue;
    vertical-align: top;
    background-color: purple;
}

.div4 {
    background: url(image.png) no-repeat center;
    background-size: cover;
    width: 690px;
    height: 265px;
}

如果父div的宽度为690px，为什么子div与计算出的宽度，边距和边界相加可达690。

（div1）180 + 30 +（div2）285 + 30 +（div3）165 = 690px

如果你看看div 3它的右边界是不可见的。你必须将宽度减少7px才能看到它。

这也是垂直发生的，190px的div3高度意味着准确触摸div4但是被4px关闭。

这是浏览器问题吗？默认对齐问题我不知道？我真的很想知道为什么会这样！

任何反馈都将不胜感激。：）

Answer 1

如果你在你的HTML中添加这样的评论你可以修复顶部但是对于第二行中的图像我还不知道我还在继续尝试

好的所以我确实把第一行放在div“测试”并给了他显示：隐藏的块和溢出带走了下面的空间然后我确实给了div1固定的高度和宽度180px（图像+边框）

#wrapper {
    height: 455px;
    width: 690px;
    background-color: grey;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    overflow: hidden;
 
}

.test{
    display:block;
     overflow: hidden;
}
.div1 {
  height:180px;
  width:180px;

    display: inline-block;
    margin-bottom: 10px;
    vertical-align:top;
        
}

 .image {
    max-width: 172px;
    max-height: 172px;
    border-radius: 2%;
    border: 4px solid blue;
}

.div2 {
    height: 172px;
    width: 277px;
    border: 4px solid blue;
   display: inline-block;
    margin-left: 30px;
    background-color: purple;
}

.div3 {
    width: 159px;
    height: 188px;
    display: inline-block;
    margin-left: 30px;
    border-left: 4px solid blue;
    border-right: 2px solid blue;
    border-top: 2px solid blue;
    vertical-align: top;
    background-color: purple;
}

.div4 {
   background: url('http://lorempixel.com/690/265/cats') no-repeat center;
    background-size: contain;
    width: 690px;
    height: 265px;
     display:block;
      overflow: hidden;
}

    <div id="wrapper">
  <div class="test">
  
 
  <div class="div1">

    <img src="http://lorempixel.com/172/172/cats" alt="image" class="image">

    </div><!--

    --><div class="div2">

    </div><!--

    --><div class="div3">

    </div><!--

    --> </div><div class="div4">

        </div>   
  </div>

Answer 2

你检查了盒子大小的功能吗？以下是一些可能有用的链接。

https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

缺少像素css fixed div wrapper

2 个答案: