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

【问题标题】：Three equal divs in a row, with image and border连续三个相等的div，带有图像和边框
【发布时间】：2017-04-24 21:46:08
【问题描述】：

我目前有一个页面的一部分，其中包含三个 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>

【问题讨论】：

请更正（多个）语法错误，您有多余的" 字符，&nbsp 应该是&nbsp;（带分号），尽管您仍然可以使用大写如果你真的想格式化。 <div> 也是 not <ul> 元素的有效子元素； <ul>（或<ol>）的唯一有效子是<li>；如果您想在<ul> 中添加<div>，则必须首先将其包装在<li> 元素中。

标签： html css width border

【解决方案1】：

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

最简单的可能是设置

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%;
}

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

【讨论】：

这就是我要找的，谢谢！为了清楚起见，我会将我的三个 div 中的每一个都设置为边框框，而不是我的父 div？换句话说，您的 div 代码将在我的所有三个 div 类（firstItem、secondItem、thirdItem）的 CSS 中？
@Hunter 是的，它在您指定边界的容器 div 上。但是，它也不会对父 div 造成伤害 - 无论您喜欢什么。另外你应该更正你的html代码中的错误，我在答案中发布了一个链接。
效果很好，谢谢！所以为了响应，我可以设置媒体屏幕来移除两个边框，让每个边框都是 100% 宽度？
这正是你会做的！很高兴我能帮上忙。

【解决方案2】：

使用“等距 div”CSS 技巧。这使您的 div 在水平轴上均匀分布。这个技巧很容易应用，可以为你节省很多时间。

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

【讨论】：

【解决方案3】：

当您为元素添加边框时，宽度将增加到 33% + 边框宽度。

试试

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

2px 是边框的宽度。

【讨论】：