有人可以告訴我如何打破行內塊行？我想在第二個元素之後創建一個。請幫忙！如何打破行內塊行
<div id="promoPanel">
<div id="promoBoxContainer" data-animate="fadeIn">
<div class="promoBox"></div>
<div class="promoBox"></div>
<div class="promoBox"></div>
<div class="promoBox"></div>
</div>
</div>
下面是完整的代碼：
https://jsfiddle.net/rp52wdqo/
編輯：
有沒有辦法做到在CSS？
很難告訴你真的要去什麼，但你總是可以在第二宣傳片箱後添加<br>標籤：
<div class="promoBox"></div>
<div class="promoBox"></div>
<br>
<div class="promoBox"></div>
<div class="promoBox"></div>
是否有辦法在css中做到這一點？ –
如果你要動態生成這些div，我能想到的最佳方法是將它們的寬度設置爲50％。
如果以前已知它們的數量，我會將每行都包含在不是inline-block的父級div中。像這樣：
<div>
<div class="promoBox"></div>
<div class="promoBox"></div>
</div>
<div>
<div class="promoBox"></div>
<div class="promoBox"></div>
</div>
這樣更直觀，你是「分組」你的div（在這種情況下，行）。
$redLipsColor: #d10239;
#promoPanel{
//width: 100%; height: auto;
background-color: white;
}
#promoBoxContainer{
//margin: 0 auto;
text-align: center;
}
.promoBox{
width: 45%;height:310px;
border: 1px solid #b7b7b7;
font-family: 'Open Sans', sans-serif;
font-size: 15px;
margin: 30px 10px;
display:inline-block;
vertical-align: middle;
position: relative;
}
.promoBox:hover{
transition: 0.7s ease-in-out;
border-color: $redLipsColor;
} .promoBoxLogo{
transition: 0.7s ease-in-out;
transform: perspective(600px) rotateY(360deg);
border-color: $redLipsColor;
}
.promoBoxLogo i{
color: $redLipsColor;
}
.promoBoxLogo h3{
color: $redLipsColor;
}
/* hover off ----------> start */
transition: 0.7s ease-in-out;
.promoBoxLogo{
transition: 0.7s ease-in-out;
border-color: black;
}
.promoBoxLogo i{
transition: 0.7s ease-in-out;
color: black;
}
h3{
transition: 0.7s ease-in-out;
color: black;
}
/* hover off <---------- close */
.promoBoxLogo{
width: 50px; height: 50px;
border: 1px solid #b7b7b7;
border-radius: 50%;
background-color: white;
text-align: center;
position: absolute;
top: -26px;
left: 110px;
}
.promoBoxLogo i{
font-size: 30px;
color: black;
}
.promoBoxLogo i.icon-diamond-1{
position:absolute;
left:0; right: 3.8px;
top:3.5px; bottom:0;
margin:auto;
}
.promoBoxLogo i.icon-star-empty{
position:absolute;
left:0.7px; right: 0;
top:3.5px; bottom:0;
margin:auto;
}
.promoBoxLogo i.icon-heart-empty{
position:absolute;
left:0.5px; right: 0;
top:5px; bottom:0;
margin:auto;
}
.promoBoxLogo i.icon-thumbs-up{
position:absolute;
left:0; right: 0;
top:3.5px; bottom:0;
margin:auto;
}
h3{
width: 90%; height: 50px;
margin: 0 auto;
margin-top: 50px;
text-align: center;
}
article{
text-align: center;
padding: 0 30px;
}
<div id="promoPanel">
<div id="promoBoxContainer" data-animate="fadeIn">
<div class="promoBox">
<div class="promoBoxLogo" >
<i class="icon-diamond-1"></i>
</div>
<h3>WYSOKA JAKOŚĆ</h3>
<article>
Doświadczony personel sprawi, że każdy poczuje się
wyjątkowo. Najwyższa jakość naszych usług wynika z
doświadczenia, stale podnoszonych kwalifikacji oraz
pracy na najnowocześniejszym sprzęcie.
</article>
</div>
<div class="promoBox">
<div class="promoBoxLogo">
<i class="icon-star-empty"></i>
</div>
<h3>PROFESJONALNE PRODUKTY</h3>
<article>
Do zabiegów wykorzystujemy profesjonalne
produkty renomowanych firm. Szczególną uwagę
zwracamy na dokładność, higienę oraz
sterylność podczas wykonywania każdego zabiegu
</article>
</div>
<div class="promoBox">
<div class="promoBoxLogo">
<i class="icon-heart-empty"></i>
</div>
<h3>INDYWIDUALNE PODEJŚCIE</h3>
<article>
Każdy jest tu traktowany bardzo indywidualnie, z
należytą troską i starannością. Zadowolenie
naszych klientów jest dla nas najlepszym
wynagrodzeniem i ukoronowaniem naszych starań.
</article>
</div>
<div class="promoBox">
<div class="promoBoxLogo">
<i class="icon-thumbs-up"></i>
</div>
<h3>BEZPŁATNE KONSULTACJE</h3>
<article>
Wykonujemy zabiegi dostosowane do problemów i
potrzeb każdego klienta, ponieważ wizyty
poprzedzają bezpłatne konsultacje kosmetologiczne.
</article>
</div>
</div>
</div>
你是什麼'break'是什麼意思？ –
你的意思是說'
'嗎？ – Marcelo
'寬度：50％'也許？ –