时间戳

首页 > 解决方案 > 如何在行内块 div 之间强制中断

html - 如何在行内块 div 之间强制中断

问题描述

如何在当前在线的 inline-block div 之间强制中断？

.sub-body {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.start-container {
    display: block;
    width: 90%;
}

.article-container-small {
    display: flex;
    width: 100%;
    margin-bottom: 45px;
    text-align: center;
}

.article-small {
    background: rgba(255, 255, 255, 1.0);
    display: inline-block;
    width: 380px;
    padding-top: 30px;
    padding-bottom: 30px;
    padding-left: 30px;
    padding-right: 30px;
    margin: 0px 20px 0px 20px;
    box-shadow: 0px 2px 4px rgba(0,0,0,0.2);
}

.article-small-image-wrapper {
    height: 210px;
    width: 320px;
    overflow: hidden;
    position: relative;
}

.article-small-img {
    display: inline-block;
    height: 210px;
    width: 320px;
    margin-bottom: 20px;
    background: transparent url('https://via.placeholder.com/400') center top no-repeat;
    background-size: cover;
    transition: all 0.8s;
}

.article-small-img:hover {
    transform: scale(1.2);
}
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <link rel="stylesheet" href="style.css" />
    </head>
    <body>
        <nav>
      navigation is here
        </nav>
    <section class="sub-body"> <!-- this is where the fun begins... -->
            <div class="start-container">
                <div class="article-container-small">
        
                    <div class="article-small">
                        <div class="article-small-image-wrapper">
                            <div class="article-small-img">
    
                            </div>
                        </div>
                        <h2>Artikel 001</h2>
                        <br>
                        Text Text Text Text Text Text Text Text Text Text Text Text 
                    </div>
          
                    <div class="article-small">
                        <div class="article-small-image-wrapper">
                            <div class="article-small-img">
    
                            </div>
                        </div>
                        <h2>Artikel 002</h2>
                        <br>
                        Text Text Text Text Text Text Text Text Text Text Text Text 
                    </div>
          
                    <div class="article-small">
                        <div class="article-small-image-wrapper">
                            <div class="article-small-img">
                                <a href="#" target="inhalt"></a>
                            </div>
                        </div>
                        <h2>Artikel 003</h2>
                        <br>
                        Text Text Text Text Text Text Text Text Text Text Text Text 
                    </div>
          
                    <div class="article-small">
                        <div class="article-small-image-wrapper">
                            <div class="article-small-img">
                                <a href="#" target="inhalt"></a>
                            </div>
                        </div>
                        <h2>Artikel 004</h2>
                        <br>
                        Text Text Text Text Text Text Text Text Text Text Text Text 
                    </div>
          
                    <div class="article-small">
                        <div class="article-small-image-wrapper">
                            <div class="article-small-img">
                                <a href="#" target="inhalt"></a>
                            </div>
                        </div>
                        <h2>Artikel 005</h2>
                        <br>
                        Text Text Text Text Text Text Text Text Text Text Text Text 
                    </div>
                </div>
        
            </div>
        </section>
        <script src="javascript.js"></script>
    </body>
</html>

（从我的实际项目中删除，但我保留了我使用的所有 div，这样你就可以看到所有的父元素）

目前的样子：

现在的样子

它应该是什么样子：

它应该是什么样子

我知道我可以通过以下方式选择第 n 个孩子：

.article-small:nth-child(4n) {
}

但除了背景颜色或类似的东西，我不能改变 div。

例如，当我尝试这个时：

.article-small:nth-child(4n) {
    content: "\A"; 
    white-space: pre;
}

它不做任何事情。

我也试过 float: none; （无论如何都不会改变文章）和 display: block; （粉碎文章的尺寸，但不强制中断）。

在每第 n 篇文章之后我能做些什么来强制休息？

标签： htmlcsscss-selectorsbreak

解决方案

您需要添加：

flex-wrap: wrap;          /* ADDED */
justify-content: center;  /* ADDED */

上课article-container-small。最终结果应如下所示：

.article-container-small {
    display: flex;
    width: 100%;
    margin-bottom: 45px;
    text-align: center;
    flex-wrap: wrap;          /* ADDED */
    justify-content: center;  /* ADDED */
}

将flex-wrap: wrap打破界限。justify-content: center将使它们与中心对齐。

如果你想给它更多空间，你可以添加一个margin-bottom或top。修改article-small边距为：margin: 0px 20px 20px 20px;

演示

.sub-body {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.start-container {
    display: block;
    width: 90%;
}

.article-container-small {
    display: flex;
    width: 100%;
    margin-bottom: 45px;
    text-align: center;
    flex-wrap: wrap;          /* ADDED */
    justify-content: center;  /* ADDED */
}

.article-small {
    background: rgba(255, 255, 255, 1.0);
    display: inline-block;
    width: 380px;
    padding-top: 30px;
    padding-bottom: 30px;
    padding-left: 30px;
    padding-right: 30px;
    margin: 0px 20px 20px 20px; /* MODIFIED */
    box-shadow: 0px 2px 4px rgba(0,0,0,0.2);
}

.article-small-image-wrapper {
    height: 210px;
    width: 320px;
    overflow: hidden;
    position: relative;
    margin: 0 auto;           /* ADDED*/
}

.article-small-img {
    display: inline-block;
    height: 210px;
    width: 320px;
    margin-bottom: 20px;
    background: transparent url('https://via.placeholder.com/400') center top no-repeat;
    background-size: cover;
    transition: all 0.8s;
}

.article-small-img:hover {
    transform: scale(1.2);
}
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <link rel="stylesheet" href="style.css" />
    </head>
    <body>
        <nav>
      navigation is here
        </nav>
    <section class="sub-body"> <!-- this is where the fun begins... -->
            <div class="start-container">
                <div class="article-container-small">
        
                    <div class="article-small">
                        <div class="article-small-image-wrapper">
                            <div class="article-small-img">
    
                            </div>
                        </div>
                        <h2>Artikel 001</h2>
                        <br>
                        Text Text Text Text Text Text Text Text Text Text Text Text 
                    </div>
          
                    <div class="article-small">
                        <div class="article-small-image-wrapper">
                            <div class="article-small-img">
    
                            </div>
                        </div>
                        <h2>Artikel 002</h2>
                        <br>
                        Text Text Text Text Text Text Text Text Text Text Text Text 
                    </div>
          
                    <div class="article-small">
                        <div class="article-small-image-wrapper">
                            <div class="article-small-img">
                                <a href="#" target="inhalt"></a>
                            </div>
                        </div>
                        <h2>Artikel 003</h2>
                        <br>
                        Text Text Text Text Text Text Text Text Text Text Text Text 
                    </div>
          
                    <div class="article-small">
                        <div class="article-small-image-wrapper">
                            <div class="article-small-img">
                                <a href="#" target="inhalt"></a>
                            </div>
                        </div>
                        <h2>Artikel 004</h2>
                        <br>
                        Text Text Text Text Text Text Text Text Text Text Text Text 
                    </div>
          
                    <div class="article-small">
                        <div class="article-small-image-wrapper">
                            <div class="article-small-img">
                                <a href="#" target="inhalt"></a>
                            </div>
                        </div>
                        <h2>Artikel 005</h2>
                        <br>
                        Text Text Text Text Text Text Text Text Text Text Text Text 
                    </div>
                </div>
        
            </div>
        </section>
        <script src="javascript.js"></script>
    </body>
</html>

推荐阅读