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

然而，在小屏幕，說明會掉下來在徽標下方並留在左側。我試圖給徽標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; 
     } 
    } 

看看這個JSFiddle

Answer 4

您的名字和描述應該是另一個div然後設置你想在這個新的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％的寬度。

如果您想要在名稱和描述之間留出一些空白，只需在其中一個填充（填充 - 留作描述和右鍵名稱）。