将两个CSS元素对齐在一起

Question

我试图通过使用内联块将两个div对齐在一起，但是我遇到了一些奇怪的问题，我尝试使用float并遇到了同样的问题。

以下是一个正在发生的事情的例子：

他们应该彼此相邻，但他们没有对齐。

这是我的CSS：

 WebSecurity.Login(model.Username, model.Password)

我将一些示例代码上传到jsfiddle，https://jsfiddle.net/sj851u5z/ 想知道是否有人可以帮我解决这个问题，因为我尝试了很多不同的事情而没有运气:(谢谢！

Answer 1

如果我正确理解您的问题，您只需要在vertical-align: top;声明中添加#content .articlehs。

#content .articlehs {
  display: inline-block;
  background: url("../img/asbg.png") repeat-x;
  width: 50%;
  margin-left: 10%;
  margin-top: 10px;
  vertical-align: top;
}

Answer 2

如果你要求将这些盒子的顶部对齐，那么有几件事会导致你的问题。

您在文章和侧边栏上有margin-top的不同尺寸我已将它们设为相同。

center标签是不必要的，并且还在侧栏中向下推进类型。这应该被移除，因为它已被弃用，p标签应该以CSS为中心。

虽然你可以使用inline-block元素让它们彼此相邻，但我说浮动是更好的方式。所以我在文章和侧边栏上添加了浮动，以便对齐。

https://jsfiddle.net/sj851u5z/2/

Answer 3

使用flexbox：

  #content {
   display: flex;
  }

  p {
    text-align: center
  }

  #content .articlehs { 
   width: 50%;
   margin-left: 10%;
   margin-top: 10px;
  }

  #content .articleSidebar {
   width: 20%;
   margin-left: 10%;
   margin-top: 40px;
 }

https://jsfiddle.net/t35szgpc/1/