Question

我正在为我的学习创建一个网站，我想制作一个新闻报道。现在我有4个项目：f1，tour，cultunair和剧院。

<div id = "nieuws">
            <div id="nieuwstekst">Nieuws:</div>
                <a href="activiteiten.html" target="">
                    <div id="f1">
                        <img src="f1.jpg" alt="">
                            <div id="f1tekst">F1 terug naar zandvoort</div>
                            <div id="f1subtekst">Klik voor meer informatie</div>
                    </div>
                </a>    
                <a href="activiteiten.html" target="">
                    <div id="tour">
                        <img src="tour.jpg" alt="">
                        <div id="tourtekst">Tour de france 2016 door Haarlem</div>
                            <div id="toursubtekst">Klik voor meer informatie</div>
                    </div>
                </a>
                <a href="activiteiten.html" target="">
                    <div id="cultunair">
                        <img src="cultunair.jpg" alt="">
                            <div id="cultunairtekst">NIEUW: Cultunaire dag</div>
                            <div id="cultunairsubtekst">Klik voor meer informatie</div>
                    </div>
                </a>    
                <a href="activiteiten.html" target="">
                    <div id="theater">
                        <img src="theater.jpg" alt="">
                        <div id="theatertekst">Nederlands Theater Festival in Haarlem</div>
                            <div id="theatersubtekst">Klik voor meer informatie</div>
                    </div>
                </a>
        </div>

在我的CSS中，我把这些图片分成两行，两张图片：

#f1{
position: absolute; 
left: 1%;
top: 40%;
background-color: #000000;
border: 3px solid #000000;
border-radius:10px;
padding:3px 3px; 
}

#tour{
position: absolute; 
left: 26%;
top: 40%;
background-color: #000000;
border: 3px solid #000000;
border-radius:10px;
padding:3px 3px; 
}
#cultunair{
position: absolute; 
left: 1%;
top: 70%;

background-color: #000000;
border: 3px solid #000000;
border-radius:10px;
padding:3px 3px; 
}
#theater{
position: absolute; 
left: 26%;
top: 70%;
background-color: #000000;
border: 3px solid #000000;
border-radius:10px;
padding:3px 3px; 
}

但是现在我想在css中围绕四个项目在#nieuws中创建边框。任何人都可以告诉我如何做到这一点吗？

我试过这个，但那不起作用：

#nieuws{
position: absolute; 
left: 1%;
top: 40%;
border: 3px solid #88bd32;
border-radius:10px;
padding:3px 3px; 
}

任何人都可以帮助我吗？

非常感谢！

Answer 1

在我看来，你可以使用单独的属性border-right，border-left，border-top，border-bottom。它们具有与border属性相同的属性。 E.g：

.myclass {
border-right: 1px solid black;
border-left: none
}

Answer 2

这样的东西？移除位置，因为你的div在哪里漂浮，你的主要新人不会。

#f1 {
    left: 1%;
    top: 40%;
    background-color: #000000;
    border: 3px solid #000000;
    border-radius:10px;
    padding:3px 3px;
}
#tour {
    left: 26%;
    top: 40%;
    background-color: #000000;
    border: 3px solid #000000;
    border-radius:10px;
    padding:3px 3px;
}
#cultunair {
    left: 1%;
    top: 70%;
    background-color: #000000;
    border: 3px solid #000000;
    border-radius:10px;
    padding:3px 3px;
}
#theater {
    left: 26%;
    top: 70%;
    background-color: #000000;
    border: 3px solid #000000;
    border-radius:10px;
    padding:3px 3px;
}
#nieuws {
    left: 1%;
    top: 40%;
    border: 3px solid #88bd32;
    border-radius:10px;
    padding:3px 3px;
}

Fiddle here

4张照片边框

2 个答案: