インラインブロックの行を分割する方法を教えてもらえますか？私は2番目の要素の後に1つ作成したい。助けてください！インラインブロックの行を分割する方法
<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>
はフィドルです：https://jsfiddle.net/rp52wdqo/1/
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
'width：50％'おそらく？ –