如何将这个垂直对齐的div右对齐？

debugcn 发表于 Dev

拉拉尔夫

我的安排如下：

<style>
    .title {
      background: red;
    }
    .outer {
      display: inline-block;
      border: 1px solid red; 
      background: green;
    }
    .inner {
      display: inline-block;
      vertical-align: middle;
    }
    .left {
      background: yellow; 
    }
    .right {
      background: cyan; 
    }
</style>

<div class="outer">
  <div class="title">long title</div>
  <div class="inner left">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
  <div class="inner right">
    <div>1</div>
    <div>2</div>
  </div>
</div>

如何使div与班级right向右对齐？

结果可以在http://www.cssdesk.com/uCmVL上看到

编辑

两个内部div需要保持其垂直对齐。IEvertical-align: whatever;

编辑2

布局有些复杂，它使用transform放大和缩小，我top: 50%; transform: translateY(-50%);在内部类中尝试过，但是它破坏了计算以放置SVG PATH元素

萨瓦夫

flexbox可以做很多事情。这是您要查找的布局的示例。

.main-container {
  background-color: #eee;
}
h1 {
  text-align: center;  
}
.columns {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.red {
  background-color: #f00;  
}

.blue {
  background-color: #f99;  
}

<div class="main-container">
  <h1>Title</h1>
  <div class="columns">
    <div class="column red">
      <p>First Row</p>
      <p>Second Row</p>
      <p>Third Row</p>
    </div>
    <div class="column blue">
      <p>Centered First Row</p>
      <p>Centered Second Row</p>
    </div>
  </div>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。