Div旁边有两个垂直对齐的div

Question

我知道这个问题已经被多次询问过，但似乎没有一个问题对我有用，或者他们太复杂了＃34;我的例子。

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

它应该如下所示：

这是我到目前为止所拥有的：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

查看我的fiddle

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

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

Answer 3

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

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

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

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