0

我有一个 HTML 页面，内容分为左右部分，使用CSS. 左侧内容的高度小于右侧内容的高度。因此，右侧内容 div 也位于左侧内容 div 下方。最终右内容的边界不是一条直线。

  1. 我们怎样才能避免右内容向左蔓延？
  2. 我们如何使左侧内容的高度增加到右侧内容的高度（使用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>
4

2 回答 2

3

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

更新#1

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

equalize.js是一个用于均衡HTML 元素heightorjQuery 插件width

这是一个例子：

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

这是JSBin 演示。

更新#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 演示

于 2013-08-21T15:49:00.137 回答
0

添加此样式：

.rightPart {
    margin-left: 200px;
}
于 2013-08-21T15:49:10.137 回答