- このレイアウトを考えると、右

Question

上の2スタック：

<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列を持っていると思います。また、特定のブレークポイントでは、2つの右の列が互いの上に積み重ねられます。

ビッグスクリーン：

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

設定フロート：メディアクエリ@mediaの右（最小幅：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 class="myrow"> 
    <div class="logo"> 
     <img src="https://unsplash.it/150/150"> 
    </div> 
    <div class="header-info"> 
     <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; 
     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; 
     } 
    } 

別のdivにする必要があります。このJSFiddle

Answer 4

あなたの名前と説明に見てみましょう、そしてあなたが設定あなたはその新しいdivにしたい幅。幅のメディアCSSを設定する必要はありません。

<div class="post"> 
    <div class="name"> 
     <p> 
      Someperson 
     </p> 
    </div> 
    <div class="description"> 
     <p> 
     longer text goes heeeeeeeeeeeere. 
     </p> 
    </div> 
</div> 

CSS：

.post{ 
    width: 82.6666666667%; 
} 

、あなたが名前と説明上の82％の幅を削除します。

名前と説明の間にスペースが必要な場合は、そのうちの1つにパディングを追加するだけです（説明のために左パディング、名前は右パディング）。