html - 垂直对齐选定的 div

Question

目前我的div内容是横排的，我想让另一个div内容竖排。对于我的情况，我想垂直对齐我的 content1 元素

这就是我希望 css 的样子

这是我的 html 代码:

<div id="binder">
    <div id="content"> 
        <div>
            <h1>Title</h1>
        </div>
        <br/>
        <div id="map">
        </div>
    </div>
    <div id="content1">
    </div>
    <div id="sidebar">
    </div>
 </div>

这是 css 代码:

#binder{
display:-webkit-box;
-webkit-box-orient:horizontal;
}

#content{
font:14px Calibri;
border:1px solid #3EA99F;
-webkit-box-flex:1;
margin:20px;
padding:20px;
}

#sideBar{
border:1px solid #3EA99F;
width:450px;
margin:20px;
padding:30px;
background:#3EA99F;
}

怎么做？

Answer 1

最终你也可以在不使用 flexbox 的情况下做到这一点。

代码示例:

*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

.content-wrapper,
#sidebar{
  float: left;
}

.content-wrapper{
  width:70%;
}

#content,
#content1,
#sidebar {
  border: 1px solid red;
}

#sidebar {
  width: 30%;
}

<div id="binder">
  <div class="content-wrapper">

  <div id="content">
    <div>
      <h1>Content div</h1>
    </div>
    <br/>
    <div id="map">
    </div>
  </div>
  <div id="content1">
    <h3>
      Content1 div
    </h3>
  </div>
</div>
<div id="sidebar">
  <h3>
      Sidebar div
    </h3>
</div>
</div>

注意事项

• 我添加了一个.container-wrapper div 作为#content 和#content1 的父级
• 我将 .container-wrapper 和 #sidebar 放在一起 float:left
• 在这种情况下，容器的高度是根据其内容自动设置的，但如果您愿意，可以指定一个固定值，将 height:..px 添加到相应的类/id