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

Question

我知道这个问题已经被问过好几次了，但其中 none 似乎对我有用，或者在我的例子中 "too complicated"。

我有三个 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

Answer 1

某些东西需要设置高度，可以是包装纸，也可以是图标。我还将信息 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>

Answer 2

可以使用 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 3

试试这个

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

最好用 parent 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 5

您也可以尝试使用 css 网格。

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

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

Div next to two vertical aligned divs

html

css

alignment

vertical-alignment