Question

我试图将两个div并排放置，它们之间的间距为20px。 Div是内包装，宽度为800px。左div为250px，右div为550px，但当然如果我在它们之间增加20px的余量，则总宽度增加超过800px。有没有办法强制右div宽度为550px - 20px边距？

CSS

.wrapper {
    max-width: 800px;
    height: 400px;
    background-color: green;
    margin: 0 auto;
}

.left {
    width: 250px;
    height: 300px;
    background-color: blue;
    float: left;
    margin-right: 20px;
}

.right {
    width: 550px;
    height: 300px;
    background-color: red;
    float: left;
}

HTML

<body>
    <div class="wrapper">
        <div class="left">
        </div>

        <div class="right">
        </div>
    </div>
</body>

我的意思是我必须手动减小宽度还是有更好的解决方案？

jsfiddle：https://jsfiddle.net/ytsvd77f/

Answer 1

是的，您可以使用calc(550px - 20px)作为正确div的width。

.wrapper {
  max-width: 800px;
  height: 400px;
  background-color: green;
  margin: 0 auto;
}
.left {
  width: 250px;
  height: 300px;
  background-color: blue;
  float: left;
  margin-right: 20px;
}
.right {
  width: -moz-calc(550px - 20px);
  width: -webkit-calc(550px - 20px);
  width: -o-calc(550px - 20px);
  width: calc(550px - 20px);
  height: 300px;
  background-color: red;
  float: left;
}

<div class="wrapper">
  <div class="left"></div>
  <div class="right"></div>
</div>

Answer 2

如果你在你的包装中添加display：flex它会完美运行，我猜你会更好理解。看看css。

    .wrapper {
       max-width: 800px;
       height: 400px;
       background-color: green;
       margin: 0 auto;
       display: flex;
    }

两个div在包装内并排

2 个答案: