文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >如何在手机上正确显示网页

问如何在手机上正确显示网页
EN

Stack Overflow用户
提问于 2020-12-13 18:59:47
回答 1查看 39关注 0票数 1

所以我有一张桌子和一张图片，在pc上它工作得很好，它们是相邻的，但在移动设备上，图片应该在桌子下面，但它要么覆盖在桌子上，要么就留在桌子旁边。我该如何解决这个问题呢？我已经用bootstrap 4制作了表，这是必需的。我试着固定桌子的位置，但它覆盖了桌面上的图像，当我移除固定时，它们停留在同一行，您必须向左或向右滚动。

HTML：

代码语言：javascript
复制
<div id="bottom_row" class="container-fluid text-white pt-5 position-absolute">
        <h2 class="font-weight-bold">DONNEES DE MARCHE</h2>
        
        <table class="table text-white font-weight-bold  w-50 " id="table">
            <tbody>
                <tr>
                    <td class="border-top border-info border-3" scope="">COURS</td>
                    <td class="border-top border-info border-3">38,40</td>
                    <td class="border-top border-info border-3">DATE</td>
                    <td class="border-top border-info border-3">38,40</td>
                </tr>
                <tr>
                    <td class="border-top border-info">LOREM IPSUM</td>
                    <td class="border-top border-info">XX,XX</td>
                    <td class="border-top border-info">LOREM IPSUM</td>
                    <td class="border-top border-info">XX,XX</td>
                </tr>
                <tr>
                    <td class="border-top border-info">LOREM IPSUM</td>
                    <td class="border-top border-info">XX,XX</td>
                    <td class="border-top border-info">LOREM IPSUM</td>
                    <td class="border-top border-info">XX,XX</td>
                </tr>
                <tr>
                    <td class="border-top border-info">LOREM IPSUM</td>
                    <td class="border-top border-info">XX,XX</td>
                    <td class="border-top border-info">LOREM IPSUM</td>
                    <td class="border-top border-info">XX,XX</td>
                </tr>
                <tr>
                    <td class="border-top border-info">LOREM IPSUM</td>
                    <td class="border-top border-info">XX,XX</td>
                    <td class="border-top border-info">LOREM IPSUM</td>
                    <td class="border-top border-info">XX,XX</td>
                </tr>
                <tr>
                    <td class="border-top border-info">LOREM IPSUM</td>
                    <td class="border-top border-info">XX,XX</td>
                    <td class="border-top border-info">LOREM IPSUM</td>
                    <td class="border-top border-info">XX,XX</td>
                </tr>
                <tr>
                    <td class="border-top border-bottom border-info">LOREM IPSUM</td>
                    <td class="border-top border-bottom border-info">XX,XX</td>
                    <td class="border-top border-bottom border-info">LOREM IPSUM</td>
                    <td class="border-top border-bottom border-info">XX,XX</td>
                </tr>
            </tbody>
        </table>

        


    </div>
    <div id="graph" class="">
    <img id="graph_img" src="graph.png" class="">
</div>

CSS：

代码语言：javascript
复制
body{
font-family: Helvetica, sans-serif;
background-color: rgb(38, 68, 105); 
 }
#top_row h3{

color: rgb(71, 147, 176);
float: left;
}
#top_row h2{

padding-left: 20%;
float: center;

}
#top_row h5{

float: right;

}
#top_row{
clear: both;

}

}
#bottom_row{
clear: both;
}

#graph_img{

padding-left: 55%;
height: 400px;

}

#graph{
padding-top: 80px; 
}

table{
font-size: 18px;
margin: 0;

}
img{
width: 100%;
}


.border-3{
border-width:3px !important;
}
bootstrap-4
html
css
EN

回答 1

Stack Overflow用户

发布于 2020-12-13 19:42:21

​

代码语言：javascript
复制
    <style type="text/css">
        body{
font-family: Helvetica, sans-serif;
background-color: rgb(38, 68, 105); 
 }
#top_row h3{

color: rgb(71, 147, 176);
float: left;
}
#top_row h2{

padding-left: 20%;
float: center;

}
#top_row h5{

float: right;

}
#top_row{
clear: both;

}

}
#bottom_row{
clear: both;
}

#graph_img{

height: 200px;
width: 50%;
position: center;
text-align: center;

}

#graph{
text-align: center;
}

table{
font-size: 18px;
margin: 0;

}
img{
width: 100%;
}


.border-3{
border-width:3px !important;
}
    </style>
代码语言：javascript
复制
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>


<div id="bottom_row" class="container-fluid text-white pt-5 position-absolute">
        <h2 class="font-weight-bold">DONNEES DE MARCHE</h2>
        
        <table class="table text-white font-weight-bold  w-50 " id="table">
            <tbody>
                <tr>
                    <td class="border-top border-info border-3" scope="">COURS</td>
                    <td class="border-top border-info border-3">38,40</td>
                    <td class="border-top border-info border-3">DATE</td>
                    <td class="border-top border-info border-3">38,40</td>
                </tr>
                <tr>
                    <td class="border-top border-info">LOREM IPSUM</td>
                    <td class="border-top border-info">XX,XX</td>
                    <td class="border-top border-info">LOREM IPSUM</td>
                    <td class="border-top border-info">XX,XX</td>
                </tr>
                <tr>
                    <td class="border-top border-info">LOREM IPSUM</td>
                    <td class="border-top border-info">XX,XX</td>
                    <td class="border-top border-info">LOREM IPSUM</td>
                    <td class="border-top border-info">XX,XX</td>
                </tr>
                <tr>
                    <td class="border-top border-info">LOREM IPSUM</td>
                    <td class="border-top border-info">XX,XX</td>
                    <td class="border-top border-info">LOREM IPSUM</td>
                    <td class="border-top border-info">XX,XX</td>
                </tr>
                <tr>
                    <td class="border-top border-info">LOREM IPSUM</td>
                    <td class="border-top border-info">XX,XX</td>
                    <td class="border-top border-info">LOREM IPSUM</td>
                    <td class="border-top border-info">XX,XX</td>
                </tr>
                <tr>
                    <td class="border-top border-info">LOREM IPSUM</td>
                    <td class="border-top border-info">XX,XX</td>
                    <td class="border-top border-info">LOREM IPSUM</td>
                    <td class="border-top border-info">XX,XX</td>
                </tr>
                <tr>
                    <td class="border-top border-bottom border-info">LOREM IPSUM</td>
                    <td class="border-top border-bottom border-info">XX,XX</td>
                    <td class="border-top border-bottom border-info">LOREM IPSUM</td>
                    <td class="border-top border-bottom border-info">XX,XX</td>
                </tr>
            </tbody>
        </table>

    </div>
    <div id="graph" class=""><img id="graph_img" src="graph.png" class=""></div>

​

我已经在图像样式中添加了text-align属性以及高度，以使其在代码中具有响应性和位置。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/65274807

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档