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

Question

我目前有一个页面的一部分，其中包含三个 div，它们包含图像并充当链接。我现在通过在 css 中使用 33% 的宽度使它们完美地排成一排，但我有一个问题。

我需要这些图片比 div 稍微小一点，并且它们之间有黑色边框，如下所示：

我在前两个行项目的右侧添加了一个黑色边框，但它会将最后一个元素移到下一行。这一行确实需要 100% 宽度，但我需要一些帮助让这些人同样适合，但仍然有 space 和边框。

代码：

<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/

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

Three equal divs in a row, with image and border

html

css

border

width