背景和边框中的 CSS 冲突答案

【问题标题】：CSS conflict in backgrounds and border背景和边框中的 CSS 冲突
【发布时间】：2016-02-21 11:32:12
【问题描述】：

在设计页面时，我在一个包含一组 div 的 div 中遇到了冲突（我猜）。目前看起来如何http://castellvmaqvae.nl/exposities/ img 是它应该看起来的样子。 enter image description here

【问题讨论】：

欢迎来到 Stack Overflow！寻求代码帮助的问题必须包含在问题本身中重现它所需的最短代码。尽管您提供了一个示例链接，但如果该链接失效，您的问题对于未来遇到相同问题的其他 SO 用户将毫无价值。

标签： html css

【解决方案1】：

更改以下内容，主 div 内的 div 比应有的宽，在您的情况下，您希望它们与图像具有相同的宽度，这是更新后的 CSS：

.col-md-4 third {
  width:25%; //You may want to play around with this on different screen sizes
}

或固定宽度：

.col-md-4 third {
  width:200px; // Same width as the picture
}

【讨论】：

以后最好发布@Paulie_D提到的相关代码以重现问题

【解决方案2】：

不知何故，包装器的背景颜色没有效果，但为各个 div 和边框赋予背景颜色似乎效果很好。代码：

.verwikkeld {width:316px;
height:auto;
background-color: #FFF;
border:#999 1px solid;
margin-left:20px;
margin-right:30px;
}
.verwacht{color:#666;
border-left:#000 1px solid;
border-right:#000 1px solid;
border-top:#000 1px solid;
width:220px;
background-color:#FFF;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
padding-top:10px;
padding-bottom:10px;
font-size:32px;
}
.verwacht_img{border-left:#000 1px solid;
border-right:#000 1px solid;
background-color:#FFF;
width:220px;
}
.verwacht_naam{color:#666;
border-left:#000 1px solid;
border-right:#000 1px solid;
background-color:#FFF;
width:220px;
font-family:Arial, Helvetica, sans-serif;
padding-left:10px;
padding-top:10px;
font-size:28px;
}
.verwacht_titel{color:#000;
border-left:#000 1px solid;
border-right:#000 1px solid;
background-color:#FFF;
width:220px;
font-family:Arial, Helvetica, sans-serif;
padding-left:10px;
padding-top:10px;
font-size:16px;
}
.verwacht_datum{color:#F90;
border-left:#000 1px solid;
border-right:#000 1px solid;
background-color:#FFF;
width:220px;
font-family:Arial, Helvetica, sans-serif;
padding-left:10px;
padding-top:10px;
font-size:12px;
}
.verwacht_text{color:#000;
border-left:#000 1px solid;
border-right:#000 1px solid;;
border-bottom:#000 1px solid;
background-color:#FFF;
width:220px;
font-family:Arial, Helvetica, sans-serif;
padding-left:10px;
padding-top:10px;
padding-bottom:20px;
font-size:12px;
}

谢谢你们的时间。

【讨论】：

【解决方案3】：

只要做这个修改：

    `col-md-2` --> `col-md-1`

    `col-md-6` -->  `col-md-7 second` 

    `col-md-4 third` --> `col-md-3 third`

同样在现有的，将text-align: center; 添加到col-md-3 third。

我希望这是你想要的。

【讨论】：

谢谢你们：我正在研究一个适合第三列的包装器，并有一个像这样的白色背景和边框：.verwikkeld { width:200px;高度：自动；背景颜色：#FFF；边框：#999 1px 实心；左边距：20px；边距右：30px；在某种程度上，这可能是一种选择吗，定位和背景是主要问题。