故障排除 CSS Divs 上的边框

Question

我目前正在构建一个网格布局网页as you can see here in this livelink。但是我无法弄清楚为什么边框没有出现在我的 'special offer' 方块和 'portfolio' 方块上。我什么都试过了！这显然是一个 CSS 问题，但它适用于除这两个之外的所有其他方格。有人可以看看上面的实时链接并查看源代码以尝试找出边框不起作用的原因。

HTML 其中一个 DIV 受到影响

<div class="trigger">
<div tabindex="0" class="testimony maincontent static"><div class="slider2">
<div class="just_text"><div class="caption-box">Portfolio</div><img src="slide1.png" height="200" width="200" /></div>
<div class="just_text"><div class="caption-box">Portfolio</div><img src="slide2.png" height="200" width="200" /></div>
<div class="just_text"><div class="caption-box">Portfolio</div><img src="slide3.png" height="200" width="200" /></div>
<div class="just_text"><div class="caption-box">Portfolio</div><img src="slide4.png" height="200" width="200" /></div>
</div></div>
</div>

HTML 其他 DIV 受影响

<div class="trigger large">
        <div tabindex="0" class="testimonywide maincontent staticlarge"><div class="slider">
<div class="just_text"><div class="caption-box">Special Offer</div><img src="slide1.png" height="200" width="400" /></div>
<div class="just_text"><div class="caption-box">Special Offer</div><img src="slide2.png" height="200" width="400" /></div>
<div class="just_text"><div class="caption-box">Special Offer</div><img src="slide3.png" height="200" width="400" /></div>
<div class="just_text"><div class="caption-box">Special Offer</div><img src="slide4.png" height="200" width="400" /></div>
</div></div>
    </div>
</div>

Answer 1

您需要从 .trigger div 中删除 overflow: hidden; 并相应地调整 div 。

希望这能解决您的问题。

Answer 2

如果你想订购 html 的边框，只需写

<div class="just_text" style="border-style: solid"><div class="caption-box">Special Offer</div><img src="slide4.png" height="200" width="400" /></div>
</div></div>

style属性给border

style="border-style: solid"

Answer 3

.trigger.large 宽度为 400px。
.staticlarge（它是上面的子项）的宽度为 400px 加上 1px 的边框。它的 outer 宽度因此是 402px.
.trigger 有 overflow: hidden 所以它剪掉了溢出的 2px。

解决方案是删除子项上 400px 的硬编码宽度。如果必须指定宽度，则指定以下之一：

398px
宽度：100% + 框尺寸：边框框
宽度：计算（100% - 2px）

Answer 4

问题是 div 的宽度和高度更大，因为它变得隐藏。照顾好他们，你就能看到边界了。

更具体地说，减少 .sssprev, .sssnext 和 .staticlarge 元素的高度。这将解决您的问题。我已经在你提供的link上测试过了

我尝试使用 150px 的宽度，我能够看到边框。

故障排除 CSS Divs 上的边框

Troubleshooting CSS border on Divs

html

css

border

stylesheet