Question

Css对我来说总是一个新的惊喜。

我想让4个div在线旁边（或2和2，取决于父级）只要它们是空的就可以了。一旦获取内容就会中断，如附图所示。

我很困惑。一个div的内容如何影响完整的无关div？

＆＃13;

.statistictable{
    display: inline-block;
    margin:20px;
    width: 300px;
    height:100px;
    background: #D9EFFF;
}
.statistics{
  border-bottom:5px solid;
}

＆＃13;

<div class="statistics">
    <div class="statistictable">
I'am breaking!!!

    </div>
    <div class="statistictable">

    </div>
    <div class="statistictable">

    </div>
    <div class="statistictable">

    </div>
</div>
<div class="statistics">
    <div class="statistictable">


    </div>
    <div class="statistictable">

    </div>
    <div class="statistictable">

    </div>
    <div class="statistictable">

    </div>
</div>

＆＃13;

Answer 1

我会使用span标签而不是div，因为默认情况下内联是内联的。这会给出预期的结果吗？

例如

{% extends 'blog/base.html' %}

{% block content %}
    {% if user.is_authenticated %}
        <div class="container-fluid">
             <div class="row">
                 <div class="text-right">
                    <a href="{% url 'post_new' %}"><h1 class="glyphicon glyphicon-plus"></h1></a>
                 </div>
             </div>
        </div>
    {% endif %}
        <div class="container">
            <div class="row">
                <div class="col-lg-3 col-md-3 col-sm-4 col-xs-10 ">
                    {% for projectpost in projectposts %}
                    <div class="projectposts">
                        <img src="{{ projectpost.image_url }}" id="projects_image" class="img-thumbnail"/>
                        <div class="page-header">
                            <h2>{{ projectpost.title }}</h2>
                        </div>
                        <footer>By: {{ projectpost.author }}</footer>
                        <p>{{ projectpost.text | truncatewords:50 }}</p>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
{% endblock %}

当包含元素时，Css div内联不是彼此相邻的

1 个答案: