Question

我目前有一个小部件可以查看我希望它如何用于大屏幕，但在将其缩小为移动设备时会出现问题。

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

我的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/

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

2 个答案: