使用左右浮动/宽度 50% 不允许我的内容在移动视图上响应

Question

我正在使用“图块”来显示内容，单击图块会展开内容。在扩展内容中，我使用左侧显示文本 (spec-info)，使用右侧 (icon-percent) 显示图标。我对这个结果很满意，因为与文本相比，位于右侧的图标位置很好。但是，当在较小的设备尺寸上时，(ipad、iphone) - 使用左右的“拆分”视图将恢复为全宽，图标会适当缩放并显示在文本上方。我熟悉媒体查询，但不确定它们是否适合此实现？任何想法将不胜感激！我在这里也创建了一个工作 fiddle：https://jsfiddle.net/6gsvjt4r/1/

function openTab(tabName, event) {
  event.target.classList.add("active-tile");
  event.target.children[2].classList.add("arrow-up");
  var i, x;
  x = document.getElementsByClassName("content");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  document.getElementById(tabName).style.display = "block";

  // Get all the tabs into a collection
  // (don't use .getElementsByClassName()!)
  let tabs = document.querySelectorAll(".tile");

  // Set up a click event handler on each of the tabs
  tabs.forEach(function (tab) {
    tab.addEventListener("click", function (event) {
      // Loop over all the tabs and remove the active class
      tabs.forEach(function (tab) {
        tab.classList.remove("active-tile");
        tab.children[2].classList.remove("arrow-up");
      });

      // Set the background of the clicked tab
      this.classList.add("active-tile");
      tab.children[2].classList.add("arrow-up");
    });
  });
}
function closeTab(tabName, event) {
  x = document.getElementsByClassName("content");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  let tabs = document.querySelectorAll(".tile");
  tabs.forEach(function (tab) {
    tab.classList.remove("active-tile");
    tab.children[2].classList.remove("arrow-up");
  });
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.graph-section {
  padding-top: 70px;
}

.section-content-specialisms {
  max-width: $page-width;
  margin: 0 auto;
  padding: 0 $p-base;
  margin-bottom: 70px;

  justify-content: space-between;
  position: relative;
}

@media (min-width: $tablets) {
  .section-content-specialisms {
    flex-direction: row;
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

.box {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  padding-right: 6rem;
  padding-left: 6rem;
}

.tile,
.active-tile,
.content {
  box-sizing: border-box;
}

.tile > * {
  pointer-events: none;
}

.tile {
  flex: 1 0 auto;
  order: 0;
  flex-basis: 25%;
  border: 1px solid grey;

  /* For visual only  */
  background-color: #222;
  height: 150px;
  text-align: center;
  font-size: 16px;
  color: white;
  cursor: pointer;
}

.active-tile {
  flex: 1 0 auto;
  order: 0;
  flex-basis: 25%;

  /* For visual only  */
  text-align: center;
  border: 1px solid #000;
  background-color: green;
  cursor: pointer;
}

.content {
  order: 1;
  flex: 1 0 100%;

  /* For visual only  */
  padding: 20px;
  color: black;
  text-align: center;
  border: 1px solid #000;
  background-color: #228b22;
}

.description {
  text-align: left;
}

.spec-info {
  text-align: left;
  width: 50%;
  float: left;
}

.percent-icon-size {
  width: 295px;
  height: 260px;
}

.icon-percent {
  width: 50%;
  float: right;
}

.icon-spacing {
  margin-top: 24px;
}

/* Clear floats after the tiles */
.box:after {
  content: "";
  display: table;
  clear: both;
}

.closebtn {
  float: right;
  color: black;
  cursor: pointer;
}

.arrow-down {
  width: 25px;
  height: 25px;
}

.arrow-up {
  width: 25px;
  height: 25px;
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}

.specialisms-content {
  padding-top: 25px;
  padding-bottom: 25px;
}

.percentage {
  color: #228b22;
}

/* 
  "Desktop" and above
 */
@media (max-width: 480px) {
  .box {
    flex-direction: column;
    padding-right: 1rem;
    padding-left: 1rem;
  }

  .content {
    order: 0;
  }
}

@media (max-width: 768px) {
  .box {
    padding-right: 1rem;
    padding-left: 1rem;
  }
}

<div class="box">
   <div class="tile" onclick="openTab('b1', event);">
        <img class="icon-spacing" src="./assets/Icons/Banking.svg" />
        <p>Banking</p>
        <img class="arrow-down" src="./assets/Icons/arrow-down.png" />
      </div>
      <div
        id="b1"
        class="content"
        style="display: none; background: white"
      >
        <span onclick="closeTab('b1', event)" class="closebtn"
          >&times;</span
        >
        <div class="expanded-content"></div>

        <div class="spec-info">
          <h3>Banking</h3>
          <p>
            Core banking products including personal current accounts,
            savings and mortgages. This category also includes banking
            platforms and operations FinTechs such as Railsbank and
            challenger banks such as Atom.
          </p>
          <ul>
            <li>Banking Personal Current Accounts (PCA)</li>
            <li>Banking Platforms</li>
            <li>Banking Operations</li>
          </ul>
        </div>
        <div class="icon-percent">
          <img src="./assets/37.png" alt="" class="percent-icon-size" />
        </div>
      </div>
<div class="tile" onclick="openTab('b2', event);">
<img class="icon-spacing" src="./assets/Icons/Regtech.svg" />
<p>RegTech</p>
<img class="arrow-down" src="./assets/Icons/arrow-down.png" />
</div>
<div id="b2" class="content" style="display: none; background: white">
<span onclick="closeTab('b2', event)" class="closebtn">&times;</span>
<div class="description">
<h3>RegTech - <span class="percentage">10%</span></h3>
<p>
  This FinTech category focuses on companies with activities and
  technology focused on reimagining and streamlining risk (AML, KYC),
  credit scoring and compliance software.
</p>
</div>
</div>
<div class="tile" onclick="openTab('b3', event);">
<img class="icon-spacing" src="./assets/Icons/InsurTech.svg" />
<p>InsurTech</p>
<img class="arrow-down" src="./assets/Icons/arrow-down.png" />
</div>
<div id="b3" class="content" style="display: none; background: white">
<span onclick="closeTab('b3', event)" class="closebtn">&times;</span>
<div class="description">
<h3>InsurTech - <span class="percentage">6%</span></h3>
<p>
  InsurTech includes companies selling insurance digitally or introducing
  new business models or (re)insurance specific software.
</p>
<ul>
  <li>InsurTech - Commercial</li>
  <li>InsurTech - Personal</li>
  <li>Insurance Platforms and Operations</li>
</ul>
</div>
</div>
<div class="tile" onclick="openTab('b4', event);">
<img class="icon-spacing" src="./assets/Icons/Lending.svg" />
<p>Lending</p>
<img class="arrow-down" src="./assets/Icons/arrow-down.png" />
</div>
<div id="b4" class="content" style="display: none; background: white">
<span onclick="closeTab('b3', event)" class="closebtn">&times;</span>
<div class="description">
<h3>Lending - <span class="percentage">13%</span></h3>
<p>
  Companies focused on innnovating credit, from commerical to alternative
  and specialist lenders or platforms facilitating P2P.
</p>
<ul>
  <li>Consumer Lending</li>
  <li>Commercial Lending</li>
  <li>P2P Lending</li>
</ul>
</div>
</div>
</div>

Answer 1

我建议您做几件事：

删除 .percent-icon-size 图片的固定尺寸

我在你的 CSS 中看到，你的高度和宽度设置为

.percent-icon-size {
    width: 295px;
    height: 260px;
}

无论包含内容的面板有多大或多小，这都会使该图像保持相同大小。以下代码段将使图像尽可能大，但限于其容器的宽度：

.percent-icon-size {
    width: 100%;
    max-width: 100%;
}

从这里，您可以做一些事情

要么保留 2 列但更改它们的宽度（可能是 70/30 等），要么如您已经提到的那样，使用媒体查询并且在较小的屏幕尺寸上不要有列。以下代码段是第二种方法的示例：

// Mobile, single column
// If you're using any other "Mobile First" approaches, 
// you may not need the media query
// 
// I'm arbitrarily selecting a max-width pixel value;  
// you'd want to update this according to your needs.
@media (max-width: 767px) {
    .spec-info, .icon-percent {
        width: 100%;
        float: none;
    }

    .percent-icon-size {
        width: 100%;
        max-width: 100%;
    }
}

希望这对您有所帮助，编码愉快。

使用左右浮动/宽度 50% 不允许我的内容在移动视图上响应

Using float left and right/ width 50% is not allowing my content to be responsive on mobile view

html

css

media-queries

responsive