主页 / 问题 / 791550
Accepted
srvr4vr
Asked:2020-02-28 21:11:38 +0000 UTC2020-02-28 21:11:38 +0000 UTC

帮助弹性

  • 772

我想实现这种行为：

想要的效果

.column-container {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-align-content: stretch;
  -ms-flex-line-pack: stretch;
  align-content: stretch;
  -webkit-align-items: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
}

.column-container div {
  -webkit-order: 0;
  -ms-flex-order: 0;
  order: 0;
  -webkit-flex: 0 1 auto;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
  -webkit-align-self: auto;
  -ms-flex-item-align: auto;
  align-self: auto;
}

.row-container .photo {
  -webkit-order: 0;
  -ms-flex-order: 0;
  order: 0;
  -webkit-flex: 0 1 30%;
  -ms-flex: 0 1 30%;
  flex: 0 1 30%;
  -webkit-align-self: auto;
  -ms-flex-item-align: auto;
  align-self: auto;
}

.row-container {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-align-content: stretch;
  -ms-flex-line-pack: stretch;
  align-content: stretch;
  -webkit-align-items: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
}

.row-container div {
  -webkit-order: 0;
  -ms-flex-order: 0;
  order: 0;
  -webkit-flex: 0 1 auto;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
  -webkit-align-self: auto;
  -ms-flex-item-align: auto;
  align-self: auto;
}
<div class="row-container card">
  <div class="column-container photo">
    <div><img src="https://opt-281576.ssl.1c-bitrix-cdn.ru/upload/iblock/467/01rudenko-s-vikt.jpg?15197940234729" /></div>
    <div>Ссылка<br/>Ссылка<br/>Ссылка</div>
  </div>
  <div class="column-container">
    <div>
      <h1>Иванов Иван Иванович</h1>
    </div>
    <div>Здесь будет всякая информация</div>
  </div>
</div>

我辛苦了一整天——结果是一碗难以理解的粥。

css

1 个回答

  1. Best Answer

    .box {
  width: 80px;
  margin: 5px;
}

.blue {
  width: 80px;
  height: 40px;
  background: blue;
}

.red {
  width: 80px;
  height: 100px;
  background: red;
}

.green {
  width: 180px;
  background: green;
  height: 40px;
}

.violet {
  width: 180px;
  background: violet;
  height: 100px;
}
.flex-box{
  background: gray;
  width: 340px;
  justify-content: center;
}

.flex-box,
.flex-subbox {
  display: flex;
}

.flex-subbox {
  padding: 5px;
  flex-direction: column;
}

@media (max-width: 768px) {
  .flex-box {
    flex-direction: column;
    align-items: center;
  }
}
    <div class="flex-box">
  <div class="flex-subbox first-block">
    <div class="box red"></div>
    <div class="box blue"></div>
  </div>
  <div class="flex-subbox second-block">
    <div class="box green"></div>
    <div class="box violet"></div>
  </div>
</div>

    • 2

相关问题