对齐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并根据屏幕大小进行更改

回答

相关问题