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

Question

I'm trying to get a border around my image and paragraphs items but I can't figure out how to do it. 我正在尝试在图片和段落项周围添加边框，但是我不知道该怎么做。 I encased them in divs and added a class to them but the background color and border effects do nothing. 我将它们封装在div中，并向它们添加了一个类，但是背景色和边框效果没有任何作用。 This is what i'm shooting for: 这就是我要拍摄的内容： 在此处输入图片说明

this is what my HTML code looks like for this section: 这是本节的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>

and here is my CSS: 这是我的CSS：

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

Answer 1

You have to add border in .pair class 您必须在.pair类中添加边框

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

Answer 2

Try as in this I have made for you fiddle 尝试以此为我为您制作小提琴

If you want use ' .pair div {} ' you need to place that div inside of div with .pair class 如果要使用' .pair div {} '，则需要使用.pair类将该div放入div中

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

Answer 3

you don't need to add div in front of .pair when you are doing class without id based you just keep 当您在不基于id的情况下进行类学习时，无需在.pair前面添加div

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

for bottom div also you need to add this "pair" class. 对于底部div，您还需要添加此“ pair”类。

Answer 4

Fixed the problem ,just go to the jsfiddle here Click Here 解决了该问题，只需在此处转到jsfiddle 单击此处

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

问题描述

4 个解决方案

解决方案1
0 2015-07-02 05:21:16

解决方案2
0 2015-07-02 05:22:36

解决方案3
0 已采纳 2015-07-02 05:27:12

解决方案4
0

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

问题描述

4 个解决方案

解决方案1 0 2015-07-02 05:21:16

解决方案2 0 2015-07-02 05:22:36

解决方案3 0 已采纳 2015-07-02 05:27:12

解决方案4 0

解决方案1
0 2015-07-02 05:21:16

解决方案2
0 2015-07-02 05:22:36

解决方案3
0 已采纳 2015-07-02 05:27:12

解决方案4
0