Question

我似乎无法让我的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>

Answer 1

让我举个例子：

你有两个div left-div说ldiv和right-div说rdiv。这些div在main-div里面说mdiv 即

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

那么你应该这样：

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

Answer 2

对您的代码进行以下更改：http://jsfiddle.net/ak9Gs/。 box-sizing指示浏览器在调整元素大小时考虑填充和边框。

CSS：

.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;
}

Answer 3

你给出的宽度为50％，与2px的边界相符，这就是为什么你的div没有被放在一边的原因。如果你删除边框，你可以根据需要获得你的div。

<强> DEMO

<强> CSS：

.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;
}

我为两个测试组提供了色差而不是边框。

Answer 4

更改testDiv类以显示内联然后它们将并排

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

希望这有帮助。

并排div在主容器div内部时不对齐

4 个答案: