Question

我在一个更大的div中有两个div。第一个有图像，第二个有文字。

在第一个div中，当前图像下方的边框。

#newsfeed_header {
    padding: 10px 0px;
    width: 98%;
    position: relative;
}
#nf_image:after {
    content: " ";
    border-bottom: solid 1px #000000;
    display: block;
}
#nf_text {
    text-transform: uppercase;
    font-size: 14px;
    font-weight: bold;
    font-family: Oswald;
}

<div id="newsfeed_header">
    <div id="nf_image">
        <img src="//dummyimage.com/35x35" />
    </div>
    <div id="nf_text">Read the latest</div>
    <br/>
</div>

但是我希望边框下一步到图像，我该怎么做？

|<img>__________________|
|text                   |

Answer 1

以下是如何操作，也适用于动态图像尺寸。

#nf_image {
    display: table;
    width: 100%;
    margin-bottom: 10px;
}
#nf_image img {
    display: table-cell;
    vertical-align: top;
}
#nf_image:after {
    display: table-cell;
    content: "";
    width: 100%;
    border-bottom: solid 1px black;
}

的 UPDATED DEMO

#newsfeed_header { padding: 10px 0px; width: 98%; position: relative; } #nf_image { display: table; width: 100%; margin-bottom: 10px; } #nf_image img { display: table-cell; vertical-align: top; } #nf_image:after { display: table-cell; content: ""; width: 100%; border-bottom: solid 1px black; } #nf_text { text-transform: uppercase; font-size: 14px; font-weight: bold; font-family: Oswald; }

<div id="newsfeed_header"> <div id="nf_image"> <img src="//dummyimage.com/35x35" /> </div> <div id="nf_text">Read the latest</div> <br/> </div>

Answer 2

您可以在图片下方使用空div来执行此操作：

＆＃13;

#newsfeedheader{
    padding: 10px 0px;
    width: 98%;
    position: relative;
}

#border {
    margin-top: -8px;
    margin-bottom: 10px;
    border-top: 2px solid red;
    z-index: -10;
}

#nf_text{
    text-transform: uppercase;
    font-size: 14px;
    font-weight: bold;
    font-family: Oswald;
}

＆＃13;

 <div id="newsfeed_header">
     <div id="nf_image"><img src="http://www.pixelsquish.com/wp-content/gallery/random-impulses/the-arch-jumpers.jpg" height="105" /></div>
     <div id="border"></div>
     <div id="nf_text">Read the latest</div>
     <br/>
</div>

＆＃13;

你给div一个负上边距和一个负z-index，使它出现在图像后面。这样你放在div上的边框就会出现在图像的旁边。

Answer 3

GOT IT！

我将一个等于图像宽度的边距添加到：after块之后。现在，底部边框仅在图像后立即开始。

如何在图像旁边添加边框？

3 个答案: