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。＆GT;。＆LT;清除任何东西都没有用。建议？

CSS problem screen shot

这里是输出代码（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列（两个蓝色框一个在另一个下面），而在较大的视图上它应该是两列（两个蓝色框彼此相邻）。我以前曾经多次做过这种事情的造型，从来没有这样的难度造型。只是在寻找有关正在发生的事情的建议，它并不想漂浮在＆＃34; 1线＆＃34;彼此相邻。

desired outcome

Answer 1

添加`float：left＆＃39;在css中如下

    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已使用可视示例更新了问题。

你没有给出你想要达到的目标的明确定义，但我会对它进行一次尝试。

我将假设以下内容：

浅蓝色DIV应该在深蓝色DIV下。
深蓝色DIV是浅蓝色DIV的标题。
每个深蓝色DIV和浅蓝色DIV将被处理为一个项目/ gropu / etc。
在较小的屏幕上，肝脏损伤组出现在肾脏损伤组之上。
在较大的屏幕上，肝损伤组出现在肾脏损伤组的左侧。

如果是这样，那么问题在于您有条件地输出内容/标记的方式。模板与您提供的输出标记不匹配。每个标头都嵌套在与其相关内容相同的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似乎可能是多余的，以及其他标记注意事项。

Div内容不会向左移动

2 个答案: