Question

我目前有几个div嵌套在一起以显示我的内容。两个内部div应根据其中显示的文本在高度上均匀扩展，但目前文本只是在没有DIV的情况下继续运行。

从阅读其他用户的问题，建议使用overflow：auto;但这导致滚动条，我实际上希望div的高度在需要时增长。目前容器DIV有一个固定的高度，我试着改为最小高度，但是这会导致它比实际内容高得多，我相信它们的高度是100％。

如何解决这个问题？

enter image description here

.item
{
    width: 100%;
    height: 200px;
    background-color: #5ea8de;
    margin-top: 10px;
    border: 2px solid red;
}
.trigger
{
    width: 20%;
    height: 100%;
    background-color: #5ea8de;
    float: left;
    padding-left: 15px;
    border: 2px solid green;
}
.task
{
    width: 78%;
    height: 90%;
    margin-top: 7px;
    background-color: #1c3c5b;
    float: left;
    /*border: 1px solid;*/
    border: 2px solid blue;
}

HTML：

        foreach ($tasks as $task)
        {
            echo "<div class='item'>";

            $id = $task->Id;
            $type = $task->Type;
            $desc = $task->Description;
            $emits = $task->Emits;
            $events = $task->Tasks;

            echo "<div class='trigger'>
                    <div class='remove'><a href=''><img src='images/remove.png'></a></div>
                    <h4>Trigger: </h4></br>
                    $desc
                    <p>
                    <h4>Emits: </h4>";

                foreach ($emits as $emit)
                {
                    echo $emit . "</br>";
                }

                echo "</div>";
                echo "<div class='task'>";

                    foreach($events as $event)
                    {
                        $event_id = $event->Id;
                        $event_method = $event->TaskMethodName;
                        $event_params = $event->ParameterMapping;
                        $event_oneshot = $event->IsOneshot;
                        $event_enabled = $event->Enabled;

                        // Use the Method ID and retrieve Description for display (Make helper method for this???)
                        foreach ($methods as $method)
                        {
                            if ($method->Id == $event_method)
                            {
                                echo "<div class='remove'><a href=''><img src='images/remove.png'></a></div>";
                                echo "<h4>METHOD: " . $method->Description . "</h4>";
                            }
                        }

                        // Loop through the individual parameters and display both the key/value
                        foreach ($event_params as $key => $value)
                        {
                            echo "<label>" . $key . " | " . $value . "</label></br>";
                        }

                        echo "<hr>";
                    }

                echo "</div>"; //Task

            echo "</div>"; //Trigger
        }

Answer 1

您可以使用display: table这是一个示例

http://jsfiddle.net/uLbevpaj/

.item {
    width: 100%;
    background-color: #5ea8de;
    margin-top: 10px;
    border: 2px solid red;
    display: table;
}
.trigger {
    width: 20%;
    height: 100%;
    background-color: #5ea8de;
    vertical-align: top;
    padding-left: 15px;
    border: 2px solid green;
    display: table-cell;
}
.task {
    width: 78%;
    vertical-align: top;
    margin-top: 7px;
    background-color: #1c3c5b;
    display: table-cell;
    /*border: 1px solid;*/
    border: 2px solid blue;
}

Answer 2

您可以尝试调整项目类以使用min-height并添加overflow:hidden，因为我已经在此example为您完成了:) 这应该允许它保持最小尺寸，如同你提到的那样，同时仍然随着文本动态增长。

.item{
    width: 100%;
    min-height: 200px;
    background-color: #5ea8de;
    margin-top: 10px;
    border: 2px solid red;
    overflow:hidden;
}

根据内容扩展DIV

2 个答案: