HTML/CSS边框多个元素

我试图让我的图像和段落项目的边框，但我不知道如何做到这一点。我将它们装入div中，并为它们添加了一个类，但背景颜色和边框效果什么也不做。这就是我对拍摄： enter image description here HTML/CSS边框多个元素

这是我的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; 
}

来源

2015-07-02 Joseph hooper

你不需要在.pair前加上股利，当你没有做类基于ID的只需保持

.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还需要添加这个“对”类。

来源

2015-07-02 05:27:12 mugdha

试过了，什么也没有显示出来 –

https://jsfiddle.net/mfjgLzn3/ –

@Josephhooper输出是什么？ –

您必须添加边界在.pair类

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

来源

2015-07-02 05:21:16

试了一下没有运气 –

试试在这个我为你做的fiddle

如果你想用“.pair div {}”你需要该分区将div中有.pair类

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

来源

2015-07-02 05:22:36

这个工作，但边界/背景心不是围绕着图片和段落是它下面 –

阅读评论置于小提琴的CSS框中，有例如 –

我有它，就像它设置它的小提琴，但没有舔。也许是因为我为我的图像和段落设置了我的花车？ –

解决了这一问题，只是去的jsfiddle这里Click Here

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

 
.img1 { 
 
    float: left; 
 
} 
 

 
.clearfix { 
 
    overflow: auto; 
 
}

<body> 
 
\t <div class="clearfix"> 
 
\t <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>

来源

2015-07-02 05:46:40

HTML/CSS边框多个元素

回答

相关问题