css - 在主容器 div 中并排 div 不对齐

标签 css

我似乎无法让我的 div 在 div 内并排对齐,谁能看出问题出在哪里?我试图将 divContainer 元素的高度设置为 buttonPanel 元素和并排放置的 2 个 testDiv 元素。我还尝试使用 float: left 设置 testDiv 元素,但这也不起作用。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="MSThemeCompatible" content="Yes" />
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<title>Test</title>
<style type="text/css">
* {
   font-family: tahoma;
   font-size: 8pt;
}

#buttonPanel {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    text-align: right;
    background-color: buttonface;
}

#buttonPanel hr {
    margin: 0;
}

#buttonPanel button {
    margin: 10px;
    width: 75px;
}

#divContainer {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 45px;
    border: 2px solid #FFFF00;  
}

.testDiv {
    display: inline-block;
    width: 50%;
    height: 100%;
    border: 2px solid blue;     
}

</style>
</head>
<body>

<div id="divContainer">
    <div id="test1" class="testDiv">test1</div>
    <div id="test2" class="testDiv">test2</div>
</div>
<div id="buttonPanel">
    <hr/>
    <button id="btnOK">OK</button>
    <button id="btnCancel">Cancel</button>
</div>  
</body>
</html>

最佳答案

举个例子:

你有两个 div,左-div 说 ldiv,右-div 说 rdiv。这些 div 在 main-div 里面,说 mdiv 即

<div class = "mdiv">
    <div class="ldiv">
    </div>
    <div class="rdiv">
    </div>
</div>

那么你的css应该是这样的:

#mdiv{}
#ldiv {float:left;}
#rdiv{ float:left;}

关于css - 在主容器 div 中并排 div 不对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24545006/

相关文章:

javascript - 当屏幕最大化时,div 模式弹出窗口在 IE 上无法正确呈现,在 Chrome 上工作正常

javascript - 更改有序列表中的编号?

javascript - 在饼图( Highcharts )中突出显示事件数据标签

jQuery 多 div 下拉菜单

css - 相邻显示器中的 iframe :table-cell element pushes down the content on its neighboring cell

css - 如何从 PrimeNG 更改 MenuItem 中的样式

使用本地存储的 JAVASCRIPT 登录重定向

html - Bootstrap 3 导航栏右边距不应该是 -15px

javascript - 页面加载时出现弹出窗口

javascript - 选择具有相同 ID 的第 n 个 html DOM 元素