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

Question

我想在我的图片和段落项目周围添加边框，但我不知道该怎么做。我将它们封装在 div 中并向它们添加了 class，但背景颜色和边框效果没有任何作用。这就是我的目标：

这就是我的 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 中添加边框 class

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

Answer 2

试试我为你做的这个fiddle

如果你想使用'.pair div {}'，你需要将 div 放在 div 的内部 .pair class

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

Answer 3

你不需要在 .pair 前面添加 div 当你做 class without id based 你只要保持

.pair  {
      border: 3px rgb(86, 10, 10) solid;
      padding: 9px;
      display: block;        
 }   

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

底部 div 你还需要添加这个 "pair" class.

Answer 4

已解决问题，只需转到此处的 jsfiddleClick Here

div {
    border: 3px solid #8AC007;
}

.img1 {
    float: left;
}

.clearfix {
    overflow: auto;
}

<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>

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

HTML/CSS Border Around Multiple Elements

html

css

border