Question

我需要你的帮助，

如何让其他（红色）div在主div内部的蓝色div旁边很好地排列。我附上了以下问题的图片：

enter image description here

以下是代码：

＆＃13;

* {
  margin: 0;
  padding: 0;
}
html {
  background: rgb(132, 132, 132);
}
.centerObject {
  width: 800px;
  height: 600px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -400px;
  /* Half of Width */
  margin-top: -300px;
  /* Half of Height */
  background: rgb(212, 208, 200);
  border: 2px ridge rgb(75, 75, 75);
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <div class="centerObject">
    <div id="a" style="width: 200px; height: 100%; border: 1px solid blue;"></div>
    <div id="b" style="width: 597px; height: 100%; border: 1px solid red; float: right;"></div>
  </div>
</body>

</html>

＆＃13;

Answer 1

您可以添加此CSS：

.centerObject div {
    box-sizing:border-box;
    display:inline-block;
}

＆＃13;

* {
    margin: 0;
    padding: 0;
}
html {
    background: rgb(132, 132, 132);
}
.centerObject {
    width:800px;
    height:600px;
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-400px;
    /* Half of Width */
    margin-top:-300px;
    /* Half of Height */
    background: rgb(212, 208, 200);
    border: 2px ridge rgb(75, 75, 75);
}
.centerObject div {
    box-sizing:border-box;
    display:inline-block;
}

＆＃13;

<div class="centerObject">
    <div id="a" style="width: 200px; height: 100%; border: 1px solid blue;"></div>
    <div id="b" style="width: 597px; height: 100%; border: 1px solid red; float: right;"></div>
</div>

＆＃13;

一个问题是你的孩子div比他们的父母宽（计算他们的边界），所以box-sizing:border-box;将解决这个问题。然后使用display:inline-block;，您可以让它们并排显示（默认情况下它们是块元素）。

Answer 2

快速设置方法是交换两个<div>

的位置

<div id="b">...</div>
<div id="a">...</div>

Answer 3

你需要float两个div，然后在div#a中你需要减去边框的宽度：

<div id="a" style="width: 198px; height: 100%; border: 1px solid blue; float:left;"></div>

<div id="b" style="width: 597px; height: 100%; border: 1px solid red; float: right;"></div>

Answer 4

尝试添加＆＃34; float：left＆＃34;到#a和＆＃34; vertical-align：top＆＃34;到#b。您还可以在centerObject div中添加clearfix。在这里你可以阅读更多关于clearfix的信息。 ClearFix

Answer 5

你需要添加float：left;也是一种元素的风格。并将宽度降低1px以考虑边界。

<div id="a" style="width: 200px; height: 100%; border: 1px solid blue; float: left;"></div>
<div id="b" style="width: 596px; height: 100%; border: 1px solid red; float: left;"></div>

Answer 6

CSS：

* {
    margin: 0;
    padding: 0;
}

    html {
        background: rgb(132,132,132);
    }
    .centerObject {
        width:800px;
        height:600px;
        position:absolute;
        top:50%;
        left:50%;
        margin-left:-400px; /* Half of Width */    
        margin-top:-300px; /* Half of Height */
        background: rgb(212,208,200);
        border: 2px ridge rgb(75,75,75);
    }

    .centerObject  div{
        float: left;
      }

HTML：

<div class="centerObject">

    <div id="a" style="width: 200px; height: 100%; border: 1px solid blue;"></div>

    <div id="b" style="width: 596px; height: 100%; border: 1px solid red;"></div>

</div>

不能在另一个div内并排获得2个div

6 个答案: