垂直对齐选定的div(Vertically aligning selected div)

垂直对齐选定的div(Vertically aligning selected div)

目前，我的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; }

怎么做？

Currently, my div content is in horizontal style, I want to make the another div content to be position vertically. For my case i want to vertically align my content1 element

This is how i want the css to look like

This is my html code:

<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>

This the css code:

#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; }

How to do it?

最满意答案

最终你也可以不使用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和# .container-wrapper父级  
  我把.container-wrapper和#sidebar放在.container-wrapper旁边， float:left  
  在这种情况下，容器的高度是根据其内容自动设置的，但是如果需要，您可以指定一个固定值，将height:..px添加到相应的类/ id  
Eventually you can do it without using flexbox too.
 
Code example:
 
 
 
  
  
*{
  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> 
  
 
 
Notes
 
 
 I added a .container-wrapper div as parent of both #content and #content1 
 I placed .container-wrapper and #sidebar next to each other with float:left 
 In this case the height of the containers is set automatically based on their content, but if you want you can specify a fixed value adding a height:..px to the corresponding class/id