Question

我在建立的网站上遇到以下问题：

3列高度相等且宽度为1/3但在最后一列上右侧有一个小的白色间隙。我无法弄清楚为什么，这就是我所说的：

请参阅博客图片右侧的白线。

我正在使用的第1/3列代码是：

.thirdBox {
  float: left;
  width: 33.33%;
  width: calc(100% / 3);
  padding: 20px 40px;
  box-sizing: border-box;
  min-height: 400px;
  display: table;
}

和背景图片：

.thirdBox:nth-of-type(3) {
  background: url("imagelinkhere...") no-repeat 50% 50%;
  background-size: cover;
}

Answer 1

问题是在大多数浏览器中100％/ 3是33.33％，而不是你想要的确切宽度。

我不会使用calc()来查找每个表的宽度，而是在所有三个元素的父元素上使用display:flex;。

这是我能帮助你的最好的，没有任何HTML结构。请发布，我可以帮助你更多。

.parentElement{
  display:flex;
}

.firstBox, .secondBox, .thirdBox {
  padding: 20px 40px;
  flex:1;
}

.firstBox{
  background:blue;  
}

.secondBox{
  background:red;  
}

.thirdBox{
  background:green;  
}

<div class="parentElement">
  <div class="firstBox"></div>
  <div class="secondBox"></div>
  <div class="thirdBox"></div>
</div>

Answer 2

以下是使用display: table的解决方案：

<div class="row">
    <div class="col">
        <div class="col-inner">
            <span>Menu</span>
        </div>
    </div>
    <div class="col">
        <div class="col-inner">
            <p>Some text here</p>
        </div>
    </div>
    <div class="col">
        <div class="col-inner">
            <span>Blog</span>
        </div>
    </div>
</div>

的CSS：

.row {
    background-color: #999; 
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

.col {
    float: left;
    width: 33.33%;
    min-height: 400px;
}

.col-inner {
    display: table;
  width: 100%;
    min-height: 400px;
    box-sizing: border-box;
    padding: 20px 40px;
}

.col:first-child,
.col:last-child {
    background-color: yellow;
}

.col-inner span,
.col-inner p {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

三分之一的容器在末端css留下空白区域

2 个答案: