Question

我有一个HTML页面，其内容使用CSS分为左右两部分。左侧内容的高度小于正确的内容。因此，正确的内容div也低于左内容div。最终，正确内容的边界不是直线。

我们怎样才能避免左侧正确内容的爬行？
如何使左侧内容的高度增加到正确内容的高度（使用javascript）？

enter image description here

<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>

Answer 1

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

.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

更新＃1

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

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

以下是一个例子：

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

以下是 JSBin Demo 。

更新＃2

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

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

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

.myContent { display: table-row; }

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

.rightPart {
  display: table-cell;
}

以下是 JSBin Demo

Answer 2

添加此样式：

.rightPart {
    margin-left: 200px;
}

均衡左右div的高度，防止右div进入左下方div

2 个答案:

更新＃1

更新＃2