Question

鉴于此布局：

<div class="myrow">
  <div class="logo">
   <img src="https://unsplash.it/150/150">
  </div>
  <div class="name">
    <p>
    Someperson
    </p>
  </div>
  <div class="description">
  <p>
  longer text goes heeeeeeeeeeeere.
  </p>
  </div>
</div>

当屏幕尺寸很大时，我希望有3列。在某个断点处，两个右列应该叠在一起。

大屏幕：

----------------------------
|logo | name | description |
----------------------------

屏幕较小：

-----------------------
|logo | name           |
|     |----------------|
|     | description    |
-----------------------

这是我正在使用的CSS：

div{
  float:left;
}

img{
  width: 100%;
}

  .logo{
  width: 13.3333333333%;
  min-height: 3rem;
}

.name{
  width: 82.6666666667%;  
}

.description{
  width: 82.6666666667%;
}

@media (min-width: 550px) {
  .logo{
    width: 13.3333333333%;
    min-height: initial;
  }

  .name{
    width: 22%;  
  }

  .description{
    width: 56.6666666667%;
  }
}

然而，在小屏幕上，描述将落在徽标下方并留在左侧。我试图给徽标div一个最小高度，以保持它的大，并防止其他div到左边，但可能我不明白它是如何工作的。

JSfiddle：https://jsfiddle.net/4uh3pryw/2/

Answer 1

在媒体查询中设置 float：right @media（min-width：550px）

.name{
width: 22%;  
float:right
}

.description{
 width: 56.6666666667%;
 float:right
}

Answer 2

JsFiddle链接JSFIDDLE

 <div class="myrow">
  <div class="logo">
   <img src="https://unsplash.it/150/150">
  </div>
  <div div="box">
  <div class="name">
    <p>
    Someperson
    </p>
  </div>
  <div class="description">
  <p>
  longer text goes heeeeeeeeeeeere.
  </p>
  </div>
  </div>
</div>

css将是

    div{
      float:left;
    }
    img{
      width: 100%;
    }

      .logo{
      width: 13.3333333333%;
      min-height: 3rem;
    }
    .box{width: 50%;}
    .name{
      width: 100%;  
    }

    .description{
      width: 100%;
    }

    @media (min-width: 550px) {
      .logo{
        width: 13.3333333333%;
        min-height: initial;
      }
    .box{width: 82.6666666667%; word-wrap: break-word;}
      .name{
        width: 50%;  
      }

      .description{
        width: 50%;
      }
    }

Answer 3

为了获得更好的结果，您还需要稍微更改 DOM 和 CSS 。

<强> HTML ：

    div {
      float: left;
    }

    img {
      width: 100%;
    }

    .logo {
      width: 13.3333333333%;
      min-height: 3rem;
      display: inline-block;
      vertical-align: top;
    }

    .header-info {
      width: 82.6666666667%;
      display: inline-block;
      vertical-align: top;
    }

    .name {}

    .description {}

    .header-info p {
      margin: 0;
      padding: 0 0 0 15px;
      line-height: 4rem;
    }

    @media only screen and (max-width: 580px) {
      .logo {
        min-height: initial;
      }
      .header-info p {
        line-height: normal;
        padding: 5px 0 0 15px;
      }
    }

<强> CSS ：

GET /v2/<image>/manifests/<tag>

查看此JSFiddle

Answer 4

您的姓名和描述应该在另一个div中，然后您在新div上设置所需的宽度。您甚至不需要为宽度设置媒体css。

.post{
  width: 82.6666666667%; 
}

的CSS：

{{1}}

并删除名称和说明上82％的宽度。

如果你想在名称和描述之间留一些空格，只需在其中一个中添加填充（padding-left表示描述，右边是名称）。

从3列到2列 - 在右侧堆叠2

4 个答案: