Question

我试图将#subwrapper和#submission_message并排显示，并使用#vert_center作为一种“轨道”将它们保持在一起，垂直居中于页面上。但是，＃subscriber_message继续直接在#subwrapper下加载，就像它正在清除左边的东西一样。帮助

CSS：

#floater{
   position:relative;
   float: left;
   height:50%;
   margin-bottom: -155.5px;
   width:1px;
}

#vert_center{
  position: relative;
  clear: left;
  width:100%;
  height:315px; 
}

#subwrapper{
  display:block;
  background-color:#FFFFFF;
  position:relative;
  width:600px;
  height:315px;
  margin: 0 auto;

#submission_message {
  position:relative;
  width:600px;
  height:315px;
  margin: 0 auto;
}

基本HTML：

<div id=floater></div>
<div id=vert_center>
  <div id=subwrapper>BlaBla1</div>
  <div id=submission_message>BlaBla2</div>
</div>

Answer 1

I made a Fiddle for my soltuion，基本上相当于将float: left添加到#subwrapper和#submission_message。

Answer 2

div＃submission_message应出现在div＃subwrapper下 - 它们都是块元素，这就是块元素在其容器内流动的方式（它们的容器是div＃vert_center）。如果你想让它们彼此相邻，那么将它们浮在容器中

为什么这个元素不会出现在它的兄弟姐妹旁边？

2 个答案: