连续三个相等的div，带有图像和边框

Question

我目前有一个页面的一部分，其中包含三个div，用于存放图像并充当链接。

，我现在通过在css中使用33％的宽度将它们完美地连接在一起。

我需要这些图像略小于div，并且它们之间有黑色边框，如下所示：

我在前两行项目的右侧添加了一个黑色边框，但它将最后一个元素击倒到下一行。这一行确实需要100％的宽度，但我需要一些帮助让这些家伙同样适合但仍然有边框之间的空间。

代码：

<div id="imageLinkRow" style="letter-spacing: 2px; font-weight:500;  width:100%;">
<ul style="font-weight:500;">
    <div class="firstItem">
        <li style="width:33%; text-align:center; float:left; \">
        <div><a href="#"><img src="https://dev.dutil.com/wp-content/uploads/2017/04/film.jpg" " /></a></div>
        <div style="text-align:center;">WHAT'S NEW</div></li>
    </div>

    <div class="secondItem">
    <li  style="width:33%;  text-align: center; float:left; ">
    <div><a href="#"><img src="https://dev.dutil.com/wp-content/uploads/2017/04/officeGroup.jpg" "  /></a></div>
    <div style="text-align:center;">ADVERTISING</div></li>
    </div>

    <div class="thirdItem">
    <li  style="width:33%; float:left; ">
    <div><a href="#"><img src="https://dev.dutil.com/wp-content/uploads/2017/04/bobble.jpg"   /></a></div>
    <div style="color:white;">&NBSP</div>
    </li>
    </div>
    </ul>
</div>

Answer 1

为元素添加边框时，宽度将增加到边框宽度的33％。

尝试

.firstItem.li 
{ 
    width: calc(100% / 3 - 2px); 
} 

2px是边框的宽度。

Answer 2

您有不同的选择来实现这一目标。

最简单的可能是设置

box-sizing:border-box;

这将告诉浏览器，它在计算宽度时必须考虑边框。因此，33％的宽度在技术上是33％ - 1px的内容宽度。

其他替代方法是使用width:calc()或弹性框或网格布局。

另外，你的html中有很多错误。您可能应该使用https://validator.w3.org/之类的验证程序来检查您的代码。

div{
box-sizing:border-box;
width:33%;
display:inline-block;
border-right:2px solid black;
text-align:center;
}
#one{
  background:rgba(255,0,0,.2);
}
#two{
  background:rgba(0,255,0,.2);
}
#three{
  background:rgba(0,0,255,.2);
  border:none;
}
img{
  width:100%;
}

<div id="one"><img src="https://dev.dutil.com/wp-content/uploads/2017/04/film.jpg" /></div><div id="two"><img src="https://dev.dutil.com/wp-content/uploads/2017/04/officeGroup.jpg"  /></div><div id="three"><img src="https://dev.dutil.com/wp-content/uploads/2017/04/bobble.jpg"/></div>

Answer 3

使用“Equi-distant divs”CSS技巧。这使得div在横轴上均匀分布。这个技巧很容易应用，可以节省你很多时间。

https://css-tricks.com/equidistant-objects-with-css/