在我的网站上，我试图在右侧显示一个带有相应文本块的图像。我会重复这么多次（基本上它是一个图像列表，列表中的每个图像都有相应的文本段落）。当屏幕尺寸为736像素时，我希望文本块显示在图像下方而不是侧面和图像中心。我选择了736像素，因为我认为这会占用平板电脑和手机。
为此我一直在玩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>
答案 0 :(得分：0)
以下CSS有效，非常感谢您的帮助：）
body { margin:0px; }