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

原文 标签 css

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

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

相关文章:

css - 带卡片的引导网格

css - 在斜线上对齐文本

javascript - Onclick按钮->保留颜色-是否可以使用数组?

css - 悬停时更改背景图像

css - 使用无点的动态 css

jquery - 为什么我的 content_item div 没有通过 jQuery 加载 html 页面?

html - 如何在悬停时为每个 <a> 链接设置不同颜色的样式?

html - 设置 window.innerHeight

css - 与 CSS 对齐 - 因为它已被替换为 <CENTER>,它至少可以正常工作吗?

html - 如何使用 Materialise 创建一个带有居中对齐链接的导航栏?