CSS -如何在缩小的屏幕宽度上折叠浮动的右侧div

Question

我目前有一个小工具，看起来像我想要的大屏幕，但当它减少到移动友好的东西时有问题。

这个小部件有一个标题部分，它是两个需要向右浮动的附加字段，并且只占用它们内部的文本的宽度。我需要左边的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

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

​

Answer 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/