Question

有人可以告诉我如何打破内联块行吗？我想在第二个元素之后创建一个。请帮助！

  <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中做到这一点？

Answer 1

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

Answer 2

很难说出你的真实目的，但你总是可以在第二个宣传盒之后添加<br>标签：

    <div class="promoBox"></div>
    <div class="promoBox"></div>
    <br>
    <div class="promoBox"></div>
    <div class="promoBox"></div>

这是小提琴：https://jsfiddle.net/rp52wdqo/1/

Answer 3

如果要动态生成这些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>

通过这种方式，您可以更直观地分组＆＃34;＆＃34;分组＆＃34;你的div（在这种情况下，在行中）。

如何打破内联块行

3 个答案: