Question

我试图在我的图片和段落项目周围设置边框，但我无法弄清楚如何做到这一点。我将它们包裹在div中并为它们添加了一个类，但背景颜色和边框效果不起作用。这就是我为 enter image description here

拍摄的内容

这是我的HTML代码在本节中的样子：

<div class="pair">
                <a href="GPA_Calc_Screen.png">
                    <img src="GPA_Calc_Screen.png" alt""> <!--Relative img path -->
                </a>

                <p>
                        This is a custom GPA Calculator, and what I like to think is the first real app that I made. Going to Georgia Tech, and college in general, this is a vital asset. Although at GT we don't operate on the plus/minus system, I added a setting in which you can edit that if you want.
                </p>
        </div>

这是我的CSS：

.pair div {
    display: block;
    /*padding: 5px;
    clear: right;
    width: 100%;
    border-radius: 5px;
    border-width: 3px;
    border-color: red;*/
    background: red;
}

Answer 1

您必须在.pair类中添加边框

.pair div
{
    display: block;
    padding: 5px;
    clear: right;
    width: 100%;  
}
.pair
{
    border:3px solid red;
}

Answer 2

尝试我为你做的fiddle

如果您想使用“.pair div {}”，则需要将div放在div中.pair类

.pair{
display: block;
padding: 5px;
clear: right;
width: 100%;
border-radius: 5px;
border: 5px solid #ff0000;
background: orange;
}

Answer 3

当您在没有基于ID的课程时，您不需要在.pair前面添加div＆＃xA;您只需保留

＆＃xA;＆＃xA;

  .pair {＆＃XA;边界：3px rgb（86,10,10）固体;＆＃xA;填充：9px;＆＃xA;显示：块; ＆＃XA; ＆＃xA;＆＃xA; ＆lt; div class =“pair”＆gt;＆＃xA; ＆lt; a href =“GPA_Calc_Screen.png”＆gt;＆＃xA; ＆lt; img src =“sourceofimage.png”alt“”＆gt; ＆lt;！ - 相对img路径 - ＆gt;＆＃xA; ＆LT; / A＆GT;＆＃XA; ＆LT p为H.;＆＃XA;你的文字＆＃xA; ＆LT; / P＆GT;＆＃XA; ＆lt; / div＆gt;＆＃xA;

＆＃xA;＆＃xA;

对于底部div，您还需要添加此“对”类。

＆＃xA;

Answer 4

解决了问题，只需转到jsfiddle Click Here

＆＃13;

div {
    border: 3px solid #8AC007;
}

.img1 {
    float: left;
}

.clearfix {
    overflow: auto;
}

＆＃13;

<body>
	<div class="clearfix">
	<img class="img2" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTUHgZRyJPa3nt3V4hgxAN0K2iFn1MaoYluUIwswewquau2nkdRaA" width="100" height="300">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo culpa, maiores veritatis minima sequi earum. Ad perspiciatis molestias, illum saepe nihil quo nam dignissimos ducimus similique consequatur veniam facilis iure! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit ullam perferendis esse deserunt vel ea alias, officia earum, natus, aspernatur porro. Maiores assumenda distinctio accusantium laudantium voluptate explicabo, aliquid sint.
</div>
</body>
</html>

＆＃13;

围绕多个元素的HTML / CSS边框

4 个答案: