html - Div 内容不会像它们应该的那样向左浮动

Question

对于从 .json 文件中动态提取的内容 div，我有以下标记:

<div class="subSection">
    <div ng-repeat="content in subSection.content" class="subSection_content">
            <div class="table_container">
                <p ng-if="content.type =='table_p'" ng-bind-html="content.content" class="{{content.class}}"></p>
                <ul ng-if="content.type == 'table_ul'" class="{{content.class}}">
                    <li ng-repeat="li in content.content track by $index"  ng-bind-html="li.item"></li>
                </ul>
            </div>
     </div>
</div>

以及适用于此 div 的以下 CSS:

div.table_container {
        background-color: #a9c7e1;
        width: 100%;
    }

    p.table_img_p {
        background-color: #0090c3;
        color: #FFFFFF;
        margin: 0;
        padding: 0.5em;
    }

    .table_img_list {
        padding: 0.5em;
    }

@media only screen and (min-width: 720px){
    div.subSection {
        width: 100%;
    }

    div.subSection_content {
        width: 100%;
    }

    div.table_container {
        width: 50%;
        float: left;
    }
}

这就是它给我的功能，而不是将 div 向左浮动。它将该 div 中的元素视为单独的 div。 >.< 清除任何东西都无济于事。有什么建议吗？

这是输出代码 (HTML)。 CSS 中没有发生任何奇怪的事情。

<div class="subSection">
<div class="subSection_content ng-scope">
    <p class="firstP">One way that toxicity can be measured is by its specific effect on an organ or organs. The kidneys and liver are most commonly associated with toxicity because of their primary roles in metabolism, detoxification, and excretion. However, all body organs can be affected including the skin, brain, heart, lungs, and gastrointestinal organs.</p>
</div>
<div class="subSection_content ng-scope">
    <div class="table_container">
        <p class="table_img_p">Symptoms of Liver Damage</p>
    </div>
</div>
<div class="subSection_content ng-scope">
    <div class="table_container">
        <ul class="table_img_list">
            <li class="ng-binding ng-scope">Jaundiced skin or eyes</li>
            <li class="ng-binding ng-scope">Abdominal pain</li>
            <li class="ng-binding ng-scope">Nausea</li>
            <li class="ng-binding ng-scope">Discolored or bloody waste secretions</li>
            <li class="ng-binding ng-scope">Fatigue</li>
            <li class="ng-binding ng-scope">Anorexia</li>
        </ul>
    </div>
</div>
<div class="subSection_content ng-scope">
    <div class="table_container">
        <p class="table_img_p">Symptoms of Kidney Damage</p>
    </div>
</div>
<div class="subSection_content ng-scope">
    <div class="table_container">
        <ul class="table_img_list">
            <li class="ng-binding ng-scope">Hypertension</li>
            <li class="ng-binding ng-scope">Nausea</li>
            <li class="ng-binding ng-scope">Edema</li>
            <li class="ng-binding ng-scope">Fatigue</li>
            <li class="ng-binding ng-scope">Anorexia</li>
            <li class="ng-binding ng-scope">Change in urine output</li>
            <li class="ng-binding ng-scope">Chest pain and shortness of breath</li>
        </ul>
    </div>
</div>

需要什么:在移动设备上它应该是 1 列(两个蓝色框一个在另一个下面)，而在更大的 View 上它应该是两列(两个蓝色框彼此相邻)。我以前做过很多次这种东西的造型，从来没有这么困难过。只是寻找关于正在发生的事情的建议，它不想在彼此相邻的“1 行”上 float 。

Answer 1

注意:自提供此答案以来，OP 已使用视觉示例更新了问题。

您还没有明确定义您想要实现的目标，但我会尝试一下。

我将假设以下内容:

1. 浅蓝色 DIV 应位于深蓝色 DIV 之下。
2. 深蓝色 DIV 是浅蓝色 DIV 的标题。
3. 每个深蓝色 DIV 和浅蓝色 DIV 将被处理为一个元素/gropu/等。
4. 在较小的屏幕上，肝损伤组显示在肾损伤组之上。
5. 在较大的屏幕上，肝损伤组显示在肾损伤组的左侧。

如果是这样，那么问题就是您有条件地输出内容/标记的方式。该模板与您提供的输出标记不匹配。每个 header 与其相关内容嵌套在同一组 DIV 中。

<div class="subSection_content ng-scope">
    <div class="table_container">
        <p><!-- header --></p>
    </div>
</div>
<div class="subSection_content ng-scope">
    <div class="table_container">
        <ul><!-- content --></ul>
    </div>
</div>

如果我的假设是正确的，我希望看到这样的结果:

<div class="subSection_content ng-scope">
    <div class="table_container">
        <p><!-- header --></p>
        <ul><!-- content --></ul>
    </div>
</div>

匹配您的模板但不输出标记。这将为您提供使用提供的 CSS http://jsfiddle.net/kqwpheh9/ 寻找的结果。 . jsFiddle 不包含列表之间的任何间距，您稍后必须包含它。

看来您的 .table_container 和 .subSection_content DIV 可能是多余的，还有其他标记注意事项。