Div靠近两个垂直对齐的div [英] Div next to two vertical aligned divs

问题描述

我知道这个问题已经有好几次了，但没有一个对我有效，或者对我的例子来说太复杂。

我有三个div。其中两个垂直对齐。另一个应该在他们旁边，应该和其他两个人一样高。

它应该是这样的：

这就是我到目前为止：
$ b

.wrapper {border：1px solid红; background-color：#fffdea;宽度：100％; display：inline-block;}。icon {border：1px solid lightgreen;宽度：130px;向左飘浮; height：100％;}。info {border：1px solid aqua;显示：flex; justify-content：space-between;}

< div类= 包装 > < div class =icon> < p为H.图标和LT; / p为H. < / DIV> < div class =info> < p为H.文字< / p为H. < p为H.号< / p为H. < / DIV> < div class =info> < p为H.文字< / p为H. < p为H.号< / p为H. < / div>< / div>

在我的 小提琴

解决方案

试试这个

 < div class =wrapper> 
< div class =icon> 
< p>图标< / p> 
< / div> 
< div class =info-set> 
< div class =info> 
< p>文字< / p> 
< p>编号< / p> 
< / div> 
< div class =info> 
< p>文字< / p> 
< p>编号< / p> 
< / div> 
< / div> 
< / div> 
 
 .wrapper {
 border：1px纯红色; 
 background-color：#fffdea; 
宽度：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; 
} 
  

I know that this question has already been asked several times but none of them seem to work for me or they're "too complicated" for my example.

I have three divs. Two of them are aligned vertically. The other one should be next to them and should have the same hight as the other two together.

It should look like this:

This is what I have so far:

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

Have a look at my fiddle

解决方案

try this

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

这篇关于Div靠近两个垂直对齐的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！