Question

我想在位于中心的其他div的右边添加一个div。如图所示：

enter image description here

到目前为止我有这个HTML：

<div id= "top-menu-wrapper">
  <div id="top-menu">       
  </div>
  <div id="social">
  </div>
</div>

css：

#header #top-menu {
    display           : inline-block;
    width             : 764px;
    height            : 55px;
    margin            : auto;   
}

#header #social {
    display           : inline-block;
    width             : 100px;
    height            : 55px;   
    margin-left       : 25px;

}

#header #top-menu-wrapper {
    display           : block;
    text-align        : center;
    margin-bottom     : 25px;
}

Answer 1

由于您的宽度是固定的，只需计算每个div的左偏移量，并将其作为左边距放置而不使用中心对齐。

或者，如果您的容器是流体，请将有问题的div置于右浮动子容器内，宽度为

(top container width - central div width) / 2)（代表右边的剩余空间）

如果您使用JavaScript窗口调整大小侦听器重新计算其在每个resize事件上的位置，您可能会使它看起来最好。（虽然你更喜欢只使用CSS，但我建议使用JS以获得最佳效果）

Answer 2

由于您使用内联块来显示您的框，因此父级可以：text-align:center;，第二个框可以是自己宽度的负边距，以便在中间拉出第一个框。

http://codepen.io/gcyrillus/pen/ADsEx

背景颜色用于显示框架的位置，并添加标尺以检查视觉水平中心。

#top-menu {
  display           : inline-block;
  width             : 764px;
  height            : 55px;
  background        : green;
}

#social {
  display           : inline-block;
  width             : 100px;
  height            : 55px; 
  margin-right      : -100px; 
  background        : yellow;
}

#top-menu-wrapper {
  text-align        : center;
  min-width         : 990px;
  background        : purple;
}
div {
  vertical-align    : top;
  padding           : 5px 0;
}
.ruler {
  width             : 50%;
  background        : red;
  margin            : 5px 0 ;
}

这样，你不介意父母的宽度，除非你想要他们总是在一条线上。如果是这样，则可以应用最小宽度：足够宽。

另一个解决方案是添加相同宽度的boxe 2的伪。 http://codepen.io/gcyrillus/pen/hipBl

body {
  padding           : 2em;
  margin            : 0;
}
#top-menu {
  display           : inline-block;
  width             : 764px;
  height            : 55px;
  background        : green;
}

#social, #top-menu-wrapper:before {
  display           : inline-block;
  width             : 100px;
  height            : 55px; 
  background        : yellow;
}
#top-menu-wrapper:before {
  content           : '';
  height            : 0;
}
#top-menu-wrapper {
  text-align        : center;
  min-width         : 990px;
  background        : purple;
}
div {
  vertical-align    : top;
  padding           : 5px 0;
}
.ruler {
  width             : 50%;
  background        : red;
  margin            : 5px 0 ;
}

在其他居中的div旁边添加div

2 个答案: