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列（兩個藍色框，一個在另一個下方），在更大的視圖上，它應該是兩個列（兩個藍色框，彼此相鄰）。 我以前已經做過很多次此類樣式的樣式設計，而從來沒有遇到過如此困難的樣式。 只是尋找關於發生的事情的建議，它不想在彼此相鄰的“ 1行”上浮動。

Answer 1

在CSS中添加“ float：left”，如下所示

    div.subSection_content {
            width: 100%;
            float:left;
        }

完整的代碼：-

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%;
      float: left;
        }

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

Answer 2

注意：自提供此答案以來，OP已用可視示例更新了問題。

您尚未明確定義要實現的目標，但我會稍作努力。

我將假設以下內容：

1. 淺藍色DIV應該在深藍色DIV下。
2. 較深的藍色DIV是淺藍色的DIV的標題。
3. 每個深藍色DIV和淺藍色DIV將被處理為一個/組/等。
4. 在較小的屏幕上，“ 肝損害”組顯示在“ 腎臟損害”組上方。
5. 在較大的屏幕上，“ 肝損害”組顯示在“ 腎臟損害”組的左側。

如果是這樣，那么問題就是您有條件地輸出內容/標記的方式。 該模板與您提供的輸出標記不匹配。 每個標頭與其相關內容嵌套在同一組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可能是多余的，還有其他標記注意事項。