對齊divs並根據屏幕大小進行更改

-1

在我的網站上，我嘗試顯示右側顯示相應文本塊的圖像。我會重複這些次數（實際上它是列表中每個圖像的相應段落文字的圖像列表）。當屏幕尺寸爲736像素時，我希望文本塊顯示在圖像下方，而不是側邊，圖像要居中。我選擇了736 px，因爲我認爲這將捕獲平板電腦和手機。對齊divs並根據屏幕大小進行更改

爲此，我一直在玩div標籤和@media查詢。對於桌面我有20％寬度的圖像和80％的相鄰文本。當瀏覽器的大小變爲736px時，我希望圖像爲50％，文本爲100％並顯示在圖像下方。

只要我開始玩@media，我就打了一堵牆，看不出有什麼問題。有人能夠建議嗎？

此外，我需要添加什麼，以便我可以複製和粘貼HTML，更改圖像和文本，並讓它們顯示在以前的下面？我是否認爲它應該自動執行此操作？

CSS：

div.sidebyside{ 


    @media only screen and (max-width : 736px){ 

     border: 5px solid #000000; 

    } 

    @media only screen and (min-width : 737px){ 

     float:left; 
     border: 5px solid #000000; 

    } 

} 

div#image{ 

    @media only screen and (max-width : 736px){ 

     width : 50%; 
     align-items: center; 

    } 


    @media only screen and (min-width : 737px){ 

     width : 20%; 

    } 

} 


div#info{ 


    @media only screen and (max-width : 736px){ 

     width : 100%; 

    } 


    @media only screen and (min-width : 737px){ 

     width : 70%; 
     padding-left: 5%; 

    } 

}

HTML：

<div id="image" class="sidebyside"><img src="url" alt="" /></div> 
<div id="info" class="sidebyside"> 
<p style="text-align: justify;">Nullam id dolor id nibh ultricies vehicula ut id elit. Donec id elit non mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam id dolor id nibh ultricies vehicula ut id elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Etiam porta sem malesuada magna mollis euismod. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum.</p> 

</div>

來源

2017-01-04 sarah_golf

那真的是CSS？ –

@PraveenKumar是的。但質量很低。請提供jsfiddle。 –

@ K.Daniek Nopes。仍然不確定它是否有效。 –

下面的CSS作品，非常感謝您的幫助:)

 div.sidebyside{ 

     float:left; 
     border: 5px solid #000000; 
    } 

    div#image{ 

     width : 20%; 
    } 


    div#info{ 

     width : 70%; 
     padding-left: 5%; 

    } 


    @media (max-width: 768px) { 

     div#image{ 

width: 50%;   
margin-left: 25% ; 
      margin-right: 25% ; 
     } 


     div#info{ 

      width : 100%; 
      padding-left: 0%; 

     } 

    }

來源

2017-01-04 01:04:03

對齊divs並根據屏幕大小進行更改

回答

相關問題