0

我有一些以div. 在最后一张图片之后，我想添加一个文本链接。出于某种原因，链接不会环绕图像，它们位于图像下方，这意味着我最后的文本链接与之前的链接一致，位于图像本身下方。我想要的是文本链接至少与图像一致。

查看 JSFiddle：http: //jsfiddle.net/RFzMv/

如果我float是图像周围的链接，那么它们与图像的大小相同，并且一切都按预期工作，但是图像不在 master 中居中div。图像的数量可以改变，它们的尺寸也可以改变，所以我不能使用绝对值或类似的东西来设置它们。

如何在不使用的情况下使链接与其周围的图像大小和位置相同float，因此以下链接与图像一致？

4

2 回答 2

2

如果您有一个相对于位置的容器 div，那么您可以在其中有一个绝对位置的 div，该绝对位置相对于包含的 div 而不是整个窗口定位。

这可以让您保持居中的图像，同时将链接放置在您想要的任何位置。

#centered { position: relative; width: 500px; height: 300px; background-color: #EEE; text-align: center; }
.link-that-you-want-to-be-inline { position:absolute;margin-top:50px; }

这是一个小提琴：http: //jsfiddle.net/RFzMv/39/

于 2013-06-08T20:04:26.527 回答
2

除了第三个子 div 之外，HTML 与您的几乎相同。我将文本包装在一个<span>div 中，然后将其包含在a.imageCount链接中。

<div class="centered"> 
    <a class="image-link" href="">
        <img src="http://placekitten.com/100/100" width="100" height="100" />
    </a>

    <a class="image-link" href="">
        <img src="http://placekitten.com/110/110" width="100" height="100" />
    </a>

    <a href="#photos" class="imageCount">
        <span>some text</span>
    </a>
</div>

CSS 看起来像这样：

.centered {
    width: 500px;
    height: 300px;
    background-color: #EEE;
    text-align: center;
}
a {
    text-decoration: none;
    outline: 1px dotted blue;  /* optional to show content boxes */
}
.image-link {
    display: inline-block;
    vertical-align: bottom; /* try out: bottom, middle, top */
}
.image-link img {
    vertical-align: bottom; /* get rid of small white space below images */
}
.imageCount {
    display: inline-block;
    border: 1px solid blue;  
    padding: 5px;
    border-radius: 5px;
    background-color: lightgray;
    margin-left: 10px;
}
.imageCount span {
    /* in case you need to style the text in a special way */
}

您可以在以下位置查看演示小提琴：http: //jsfiddle.net/audetwebdesign/uBVHC/

这是如何工作的

基本上，您在 中具有三个内联块子元素div.centered，因此文本对齐按您的预期工作。

我假设其中一张图像将是该行中最高的元素，并且您希望对a.imageCount.

如果将该vertical-align属性应用于.image-link，那么这将确定图像如何相对于a.imageCount元素垂直对齐。您可以尝试三个主要值（顶部、中间、底部）并选择一个适合您想要的设计。

如果要调整顶部（或底部）位置，只需使用顶部（或底部）边距 on.imageCount和display: top (or bottom)on .image-link。

您可以在左边距上调整水平间距.imageCount。

于 2013-06-08T23:41:10.917 回答