Css 在主容器div内时并排div未对齐_Css

Css 在主容器div内时并排div未对齐

css

Css 在主容器div内时并排div未对齐,css,Css,我似乎无法让我的div在div内并排对齐，有人能看到问题出在哪里吗？我试图将divContainer元素的高度定位到buttonPanel元素和并排放置的2个testDiv元素。我还尝试将testDiv元素设置为float:left，但这也不起作用 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> &

我似乎无法让我的div在div内并排对齐，有人能看到问题出在哪里吗？我试图将divContainer元素的高度定位到buttonPanel元素和并排放置的2个testDiv元素。我还尝试将testDiv元素设置为float: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>

将testDiv类更改为显示inline，然后它们将并排显示

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

希望这能有所帮助。

让我举个例子：

你们有两个div，左div，说ldiv，右div，说rdiv。这些div在主div，说mdiv里面即

对代码进行以下更改：。框大小调整指示浏览器在调整图元大小时考虑填充和边框

CSS:

你给出的宽度为50%，边界为2px，这就是为什么你的分区a没有并排放置的原因。如果您删除边框，您可以根据需要获取您的div

CSS:

我给了两个测试div的色差而不是边框。

非常感谢DRD。除了将建议中的最后一个css样式更改为.testDiv:last类型以使其正确浮动之外，此解决方案还起到了作用。

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

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

.testDiv {
    width: 50%;
    height: 100%;
    border: 2px solid blue;   
    box-sizing: border-box;
}

.testDiv:first-of-type {
    float: left;
}

.testDiv:first-of-type {
    float: right;
}

.testDiv {
    display: block;
    float:left;
    width: 50%;
    height: 100%;    
    background-color:#ccc;    
}
.testDiv:first-child{
    display: block;
    float:left;
    width: 50%;
    height: 100%;    
    background-color:#f0f0f0;
}