Question

我有两个固定宽度的div，第一个是“主盒子”，另一个是“其他盒子”

我想要他们中心屏幕和，当浏览器宽度允许时，彼此相邻。

我通过制作后者float:left来实现后者，但是因为它们“不在流程中”我不能将它们作为中心屏幕（外部div上的margin: auto）？

是否可能采取其他方式？

Answer 1

请参阅演示：

将.a和.b设置为内联块元素时，可以将其父级设置为文本对齐中心。那么这就是你的要求。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .tc{text-align:center;}
    .a, .b{display:inline-block; width:300px; *display:inline; *zoom:1;}
    .a{background:blue;}
    .b{background:red;}
  </style>
</head>
<body>

  <div class="tc">
    <div class="a">aaa</div>
    <div class="b">bbb</div>
  </div>

</body>
</html>

Answer 2

如果我理解正确的问题HERE，你可以找到一个小提琴

#cont{
    margin: 0 auto;
    max-width:600px;
}
#a{

    width:300px;
    height: 300px;
    background:red;
    float:left;
}
#b{
    width:300px;
    height: 300px;
    background:lime;
    float:left;
}

HTML：

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

制作2个固定宽度的浮动divs中心屏幕

2 个答案: