CSS - 如何在缩小的屏幕宽度下折叠浮动的右 div答案

【问题标题】：CSS - How to collapse floated right divs underneath on reduced screen widthCSS - 如何在缩小的屏幕宽度下折叠浮动的右 div
【发布时间】：2017-04-26 02:26:47
【问题描述】：

我目前有一个小部件，可以查看我希望它如何显示在大屏幕上，但在将其缩小为适合移动设备的小部件时遇到了问题。

小部件有一个标题部分，它是两个额外的字段，需要向右浮动，并且只占用与它们内部的文本一样多的宽度。我需要左边的title-text 来占用剩余的空间。

this is what it looks like

我的 HTML 看起来像这样：

<div class="widget">
    <div class="section-title">
        <div class="title-info">        
            <div class="info-2">Info 2</div>
            <div class="info-1">Info 1</div>
        </div>
        <div class="title-text">Title</div>
    </div>
</div>

CSS 看起来像这样：

.section-title {
    height: 100%;
    font-size: 1.3em;
    color: white;
}

.section-title .title-text {
    background-color: #3261AD;
    padding: 20px;
}

.section-title .title-info {
    display: inline-block;
    float: right;
}

.section-title .info-1{
    background-color: #264D8C;
    padding: 20px;
    display: inline-block;
    float: right;
}

.section-title .info-2{
    background-color: #5BB75B;
    padding: 20px;
    display: inline-block;
    float: right;
}

@media (max-width: 420px) {
    .section-title .title-text {
        /* ??? */
        display: block;
        width: 100%;
        float: left;
    }

    .section-title .title-info {
        /* ??? */
        display: block;
        width: 100%;
    }
}

当我尝试减小屏幕宽度时会出现问题。我希望title-info 折叠在title-text 下方，但不能切换 div，因为这样 div 不会按照我想要的顺序向右浮动。有没有办法让它看起来像下面的图片，而不牺牲它在全宽上的外观或为移动设备创建单独的标记？

How I want it to look on mobile

【问题讨论】：

标签： html css mobile responsive-design

【解决方案1】：

https://jsfiddle.net/cpc4c3kt/

.section-title {
  height: 100%;
  font-size: 1.3em;
  color: white;
}

.section-title .title-text {
  background-color: #3261AD;
  padding: 20px;
}

.section-title .title-info {
  display: inline-block;
  float: right;
}

.section-title .info-1 {
  background-color: #264D8C;
  padding: 20px;
  display: inline-block;
  float: right;
}

.section-title .info-2 {
  background-color: #5BB75B;
  padding: 20px;
  display: inline-block;
  float: right;
}

@media (max-width: 420px) {
  .section-title .title-text {
    /* ??? */
    display: block;
    width: 80%;
    padding:20px 10%;
    float: left;
    transform: translateY(-100%);
  }
  .section-title .title-info {
    /* ??? */
    display: block;
    width: 100%;
    transform: translateY(100%);
  }
  .section-title .title-info>div {
    display: inline-block;
    float: right;
    width: 40%;
    padding: 5%;
  }
}

<div class="widget">
  <div class="section-title">
    <div class="title-info">
      <div class="info-2">Info 2</div>
      <div class="info-1">Info 1</div>
    </div>
    <div class="title-text">Title</div>
  </div>
</div>

【讨论】：

这并没有达到我想要的效果。我希望title-info 部分在媒体查询开始时出现在title-text 下方。
@ChrisLau 希望这就是你要找的。span>
是的！你的传奇！谢谢！
@ChrisLau 如果满意，您可以将我的答案标记为正确
不过，现在标题-文本的宽度有点小问题......它现在越过了右侧的屏幕并创建了一个滚动条。

【解决方案2】：

尝试使用Flexbox 网格布局。 Flexbox 布局模块内置在 CSS3 中，因此您不必导入任何 CSS。我发现它更容易用于定位复杂的元素布局。

.section-title {
  display: inline-flex;
  justify-content: flex-start;
  flex-flow: row nowrap;
  font-size: 1.3em;
  color: white;
  width: 100%;
}

.title-text {
  flex-basis: 70%;
  background: #3261AD;
  order: 1;
  padding: 20px;
}

.title-info {
  flex-basis: 30%;
  order: 2;
  display: inline-flex;
  flex-flow: row nowrap;
}

.info-1 {
  background: #264D8C;
  order: 1;
  flex-basis: 50%;
  padding: 20px;
}

.info-2 {
  background: #5BB75B;
  order: 2;
  flex-basis: 50%;
  padding: 20px;
}

@media all and (max-width: 420px) {
  .section-title {
    flex-wrap: wrap;
  }
  .title-info {
    flex-wrap: nowrap;
    flex-basis: 100%;
  }
  .title-text {
    flex-basis: 100%;
  }
  .info-1 {
    flex-basis: 50%;
  }
  .info-2 {
    flex-basis: 50%;
  }
}

<div class="widget">
  <div class="section-title">
    <div class="title-info">
      <div class="info-2">Info 2</div>
      <div class="info-1">Info 1</div>
    </div>
    <div class="title-text">Title</div>
  </div>
</div>

https://jsfiddle.net/yz93799v/

【讨论】：