Question

我需要进行这种标记 here

我正在尝试使用wrap属性，但是无法使其正确。请你帮助我好吗。这是我的小提琴

.block-top_wrapper {
  display: flex;
  align-items: baseline;
  width: 1160px;
  align-items: flex-start;
  flex-wrap: wrap;
  margin: 0 auto;
}

.test {
  flex: 1 1 550px;
}

.block-top_trips {
  border: 10px solid #7FCD51;
  box-sizing: border-box;
  padding: 146px 100px;
}

.block-top_peaks {
  padding: 146px 100px;
  height: 700px;
  border: 10px solid #7FCD51;
}

.block-top_review {
  border: 10px solid #7FCD51;
  box-sizing: border-box;
  padding: 146px 100px;
}

.block-top_ancient {
  width: 100%;
  height: 200px;
  border: 10px solid #7FCD51;
}

<div class='block-top_wrapper'>
  <div class='block-top_trips test'>Check out The day trips</div>
  <div class='block-top_peaks test'>5 best peaks of Kazakhstan</div>
  <div class='block-top_review test'>best way</div>
  <div class='block-top_ancient test'>Ancient Kazahstan</div>
</div>

Answer 1

您可以使用以下代码

注意！

使用%而非px进行更快速的响应

html,
body {
  width: 100%;
  height: 100%;
}

.block-top_wrapper {
  display: flex;
  align-items: baseline;
  align-items: flex-start;
  flex-wrap: wrap;
  margin: 0 auto;
  width: 100%;
  height: 100%;
}

.sub-wrap {
  display: flex;
  width: 100%;
  margin-bottom: 25px;
  height: 700px;
}

.sub-wrap .sub-flex {
  flex: 1 0 45%;
}

.mr {
  margin-right: 15px;
}

.full {
  flex: 0 1 100%;
}

.block-top_peaks {
  border: 10px solid #7FCD51;
}

.block {
  border: 10px solid #7FCD51;
  box-sizing: border-box;
  width: 100%;
  height: 50%;
}

.block-top_ancient {
  width: 100%;
  height: 200px;
  border: 10px solid #7FCD51;
}

<div class='block-top_wrapper'>
  <div class="sub-wrap">
    <div class="sub-flex mr">
      <div class='block-top_trips block'>Check out The day trips</div>
      <div class='block-top_review block'>best way</div>
    </div>
    <div class='block-top_peaks sub-flex'>5 best peaks of Kazakhstan</div>
  </div>
  <div class='block-top_ancient full'>Ancient Kazahstan</div>
</div>

Answer 2

我不确定您的确切要求，但是这种设计将完全响应，并且当宽度降至600px以下时将切换为垂直对齐。

.flx-wrap {
  padding: 20px 0 0 20px;
}

.flx-row {
  display: flex;
  flex: 1;
}

.flx-col {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.flx-bx {
  display: flex;
  flex-direction: column;
  flex: 1;
  margin: 0 20px 20px 0;
  border: 10px solid #7FCD51;
  padding: 20px;
}

.block-top_trips {
  align-items: center;
  justify-content: center;
}

.block-top_peaks {
  height: 700px;
}

.block-top_ancient {
  height: 200px;
}

@media only screen and (max-width: 600px) {
  .flx-row {
    flex-direction: column;
  }
}

<div class="flx-wrap">
  <div class="flx-row">
    <div class="flx-col">
      <div class="flx-bx block-top_trips">
        <h2>Check out The day trips</h2>
      </div>
      <div class="flx-bx">
        <h4>The best way to see Kazakhstan.</h4>
      </div>
    </div>
    <div class="flx-bx block-top_peaks">
      <h2>5 best peaks of Kazakhstan</h2>
      <p>Pick beautiful mountains.</p>
    </div>
  </div>
  <div class="flx-bx block-top_ancient">
    <h2>Ancient Kazahstan</h2>
    <p>Feel the spirit of ancient Kazahstan.</p>
  </div>
</div>

Flex，使用wrap属性阻止

2 个答案: