Question

如何围绕所有图像设置边框？有了这个，我的意思是所有图像都在1边框内。我试过了，但它变得比它应该更大，为什么会这样？

Answer 1

欢迎来到古怪的CSS世界，很少有简单问题的逻辑解决方案。在这种情况下，为什么你的边界不紧张有几个原因。

首先很简单，您使用内联样式明确设置div.friendsbox的宽度。删除它。

现在，如果你这样做，你想要边框的包含div将只是拉伸以填充可用的整个宽度。为了使div仅与其内容一样宽（假设页面宽度为＆gt; div内容），您必须将其设置为float。所以......

div.items div {
  float: left;
  border: solid 1px red; 
}

此时，您的图像周围会有一个漂亮的红色边框，但是您会注意到边框在图像下面延伸了一小部分。这里的问题是，至少我认为img元素默认为inline，这意味着它们被视为文本，这意味着浏览器会自动添加额外的填充，这在某种程度上是不可预测的。不容易控制的方式。因此，我提出的最佳解决方案是float每个img元素：

div.items img {
  float: left;
}

完成？当然不是......你看到还有一个问题。那个带有灰色边框的盒子现在已经崩溃了，显然不知道里面所有那些拳击家伙。这是一个CSS怪癖，可以使用具有clear样式集的尾随元素进行修复：

span.clear {
  clear: both;
  display: block;
}

在您的标记中，您需要添加

<span class="clear"></span>

在包含图片的div的结束标记之后。

此处：http://jsbin.com/oqari5/10/edit

如果有人有更优雅的解决方案，请发布。所有这些只是让我想起为什么我有时讨厌CSS。

Answer 2

一点点CSS就可以完成这项任务！

<style type="text/css">

img{
border: 1px solid red;
}

</style>

以下是JS Bin

的示例

希望它有所帮助！

Answer 3

一个边框紧紧围绕一系列图像（或其他内联内容）

<div style="border: 1px solid red; float: left">
    <img src="....." />
    <img src="....." />
</div>

当然，您可以（并且应该！）将此样式放在单独的样式表（css文件）中。这仅适用于演示。

div是一个块元素，希望它是父元素（内部）宽度的100％。通过使div浮动，您可以防止它占据父级的整个宽度，使其紧紧围绕其内容。

您应该将边框和浮动应用于图像周围的最内部div。如果不这样做，样式div内的div将使带边的div再次变为100％。

[编辑] 已移除display: inline。 float: left在OP提供的代码中效果更好。

Answer 4

<style type="text/css">img {border: 1px solid #000;}</style>

应该这样做。

Answer 5

你有太多<div>个标签，而且最好使用CSS类，而不是内联样式。

将所有图片包裹在一个div <div class="items">中，然后在脑中设置“items”类的样式：

<style>
    div.items img {
        border: solid 1px red;
    }
</style>

边框拉伸以填充页面的原因是你有：

<div style="border: 1px solid rgb(102, 102, 102);">

其中只定义了边框，而不是宽度，因此div“自然地”展开以填充它的容器。

阅读CSS：这并不难学，它可以节省您的时间。您不需要所有这些内联样式。

HTML / CSS：围绕所有图像的边框

5 个答案: