平衡左右div的高度，防止右div从左下方div

本文介绍了平衡左右div的高度，防止右div从左下方div的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个HTML页面，内容分为左右两部分，使用 CSS 。左侧内容的高度小于正确的内容。因此，正确的内容div也向下移动到左边的内容div。最终，正确内容的边框不是一条直线。

I have a HTML page with content divided into left and right part using CSS. The height of left content in smaller than the right content. Hence the right content div goes below to the left content div also. Eventually the border of right content is not a straight line.

我们如何避免向左边蔓延正确的内容？ li>
如何使左侧内容的高度增加到正确内容的高度（使用javascript）？

<html>

<head>
    <title>My Page</title>
    <style type="text/css">
        .myContent {
            width: 100%;
        }

        .myHeader {
        }

        .leftPart {
            border: 1px solid blue;
            width: 200px;
            clear: left;
            float: left;
            background-color: red;
        }

        .rightPart {
            border: 1px solid orange;
            width: 100%;
            background-color: beige;
        }
    </style>
</head>

<body>

    <header>
        <div class="myHeader">
            H
        </div>
    </header>

    <div id="body">
        <div class="myContent">

            <div class="leftPart">
                A
            </div>
            <div class="rightPart">
                <div >
                    <label for="Sales_and_Marketing">Sales and Marketing</label>
                    <input id="SalesAndMarketing" name="SalesAndMarketing" type="text" value="" />
                </div>
                 <div >
                    <label for="Sales_and_Marketing">Sales and Marketing</label>
                    <input id="Text1" name="SalesAndMarketing" type="text" value="" />
                </div>
            </div>
        </div>
    </div>
</body>
</html>

推荐答案

fLoat 一个元素，将 margin 设置为另一个元素。

fLoat one element, set margin to the other one.

.leftPart {
    border: 1px solid blue;
    width: 200px;
    float: left;
    background-color: red;
}

.rightPart {
    margin-left: 200px;
    border: 1px solid orange;
    background-color: beige;
}

JSBin Demo

如果您考虑使用JavaScript，您可能需要查看。

If you consider using JavaScript, you might want to take a look at equalize.js.

equalize.js 是用于均衡HTML元素的 height 或 width 的jQuery插件。

equalize.js is a jQuery plugin for equalizing the height or width of HTML elements.

下面是一个例子：

// Equalize the height of div element children
$('.myContent').equalize({children: '> div'});

这是

如果您正在寻找纯CSS解决方案，可以使用 display：table-cell; CSS声明。

If you're looking for a pure CSS solution, you can use display: table-cell; CSS declaration.

但，老实说，我宁愿使用JavaScript而不是这，因为使用表类型，可能会在呈现页面时更改Web浏览器的行为（浏览器可能将整个页面视为表格）：

But, honestly, I'd prefer using JavaScript rather than this, because using table display types, may change behavior of web browser while rendering the page (browsers may consider the entire page as a table):

#body { display: table; width: 100%; }

.myContent { display: table-row; }

.leftPart {
  width: 200px;
  display: table-cell;
}

.rightPart {
  display: table-cell;
}

这里是

Here is the JSBin Demo

这篇关于平衡左右div的高度，防止右div从左下方div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！