两个垂直对齐的 div 旁边的 div答案

【问题标题】：Div next to two vertical aligned divs两个垂直对齐的 div 旁边的 div
【发布时间】：2018-03-14 14:01:10
【问题描述】：

我知道这个问题已经被问过好几次了，但它们似乎都不适合我，或者对于我的例子来说它们“太复杂”了。

我有三个 div。其中两个垂直对齐。另一个应该在它们旁边，并且应该与其他两个一起具有相同的高度。

应该是这样的：

这是我目前所拥有的：

.wrapper{
  border: 1px solid red;
  background-color: #fffdea;
  width: 100%;
  display: inline-block;
}

.icon{
  border: 1px solid lightgreen;
  width: 130px;
  float: left;
  height: 100%;
}

.info{
  border: 1px solid aqua;
  display: flex;
  justify-content: space-between;
}

<div class="wrapper">
  <div class="icon">
    <p>Icon</p>
  </div>
  <div class="info">
      <p>Text</p>
      <p>Number</p>
  </div>
    <div class="info">
      <p>Text</p>
      <p>Number</p>
    </div>
</div>

看看我的fiddle

【问题讨论】：

这是工作小提琴：jsfiddle.net/1uhts6Lt/5

标签： html css alignment vertical-alignment

【解决方案1】：

最好用父 div 包裹右侧的 div(.info)。

试试这个，会有帮助的

.wrapper{
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-direction: row;
  justify-content: center;
  border: 1px solid red;
  background-color: #fffdea;
  width: 100%;
  padding: 10px;
}

.icon {
  border: 1px solid lightgreen;
  width: 30%;
}

.right-set {
  width: 75%;
}

.info {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-direction: row;
  border: 1px solid aqua;
}

<div class="wrapper">
    <div class="icon">
    	<p>Icon</p>
    </div>
    <div class="right-set">
        <div class="info">
            <p>Text</p>
            <p>Number</p>
        </div>
        <div class="info">
            <p>Text</p>
            <p>Number</p>
        </div>
    </div>
</div>

【讨论】：

【解决方案2】：

试试这个

<div class="wrapper">
  <div class="icon">
    <p>Icon</p>
  </div>
  <div class="info-set">
  <div class="info">
    <p>Text</p>
    <p>Number</p>
  </div>
  <div class="info">
    <p>Text</p>
    <p>Number</p>
    </div>
  </div>
</div>

.wrapper {
    border: 1px solid red;
    background-color: #fffdea;
    width: 100%;
    display: flex;
}
.icon {
    border: 1px solid lightgreen;
    width: 130px;
    margin: 5px;
}
.info-set {
    width: 100%;
}
.info {
    border: 1px solid aqua;
    display: flex;
    justify-content: space-between;
    margin: 5px 5px 5px 0;
}

【讨论】：

【解决方案3】：

某些东西需要设置高度，无论是包装还是图标。我还将信息 div 的高度设置为 50%，并将 box-sizing 更改为包含元素的边框。

.wrapper{
  border: 1px solid red;
  background-color: #fffdea;
  width: 100%;
  display: inline-block;
  height: 130px;
}

.icon{
  border: 1px solid lightgreen;
  width: 130px;
  float: left;
  height: 100%;
  box-sizing: border-box;
}

.info{
  border: 1px solid aqua;
  display: flex;
  justify-content: space-between;
  height: 50%;
  box-sizing: border-box;
}

<div class="wrapper">
  <div class="icon">
    <p>Icon</p>
  </div>
  <div class="info">
      <p>Text</p>
      <p>Number</p>
  </div>
    <div class="info">
      <p>Text</p>
      <p>Number</p>
    </div>
</div>

【讨论】：

【解决方案4】：

可以使用 Flexbox 并将 info div 包装在容器中来实现。

 <div class="wrapper">
  <div class="icon">
    <p>Icon</p>
  </div>
  <div class="info-container">
    <div class="info">
        <p>Text</p>
        <p>Number</p>
    </div>
    <div class="info">
      <p>Text</p>
      <p>Number</p>
    </div>
  </div>
</div>

CSS：

.wrapper{
  border: 1px solid red;
  background-color: #fffdea;
  width: 100%;
  display: flex;
}

.icon{
  border: 1px solid lightgreen;
  width: 30%;
  min-height: 100%;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.2);
}

.info-container{
  display: flex;
  width: 70%;
  box-sizing: border-box;
  flex-direction: column;
}

.info{
  border: 1px solid aqua;
}

【讨论】：

【解决方案5】：

您也可以尝试使用 css Grid。

.wrapper {
  display: grid;
  /*1fr unit is one fraction of the remaining space available. So I have divided the space into two tracks. One longer than the other*/
  grid-template-columns: 1fr 5fr;
}

.icon {
  background: #a03;
  /*Run the icon div in two rows height but take one track width as the rest*/
  grid-row: span 2;
}

.info {
  background: #bccd03;
}

<div class="wrapper">
  <div class="icon">
    <p>Icon</p>
  </div>
  <div class="info">
      <p>Text</p>
      <p>Number</p>
  </div>
    <div class="info">
      <p>Text</p>
      <p>Number</p>
    </div>
</div>

【讨论】：