3 열에서 2 열 -이 레이아웃을 감안할 때 오른쪽

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 열을 갖고 싶어. 그리고 특정 중단 점에서 두 개의 오른쪽 열이 서로 위에 겹쳐 져야합니다.

큰 화면 :

---------------------------- 
|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%; 
    } 
} 

그러나, 작은 화면에서, 설명은 아래로 떨어질 것 로고 아래에 있고 왼쪽에있어 라. 나는 그것을 유지하고 다른 divs가 왼쪽으로 오는 것을 막기 위해 로고 div에 최소 높이를 주려고했지만 아마도 그것이 어떻게 작동하는지 이해하지 못할 것입니다.

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

Answer 1

세트 플로트 : 오른쪽 미디어 질의 @media (최소 폭 : 550 픽셀)

.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; 
     } 
    } 

이 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 %의 폭을 제거합니다.

이름과 설명 사이에 공백을 넣으려면 그 중 하나에 패딩을 추가하기 만하면됩니다 (설명을 위해 왼쪽 패딩과 이름 오른쪽).