时间戳

首页 > 解决方案 > 如何在手机上正确显示网页

html - 如何在手机上正确显示网页

问题描述

所以我有一张桌子和一张图片，在电脑上它工作正常，它们彼此相邻，但在移动设备上，图像应该在桌子下面，但它要么覆盖桌子，要么留在桌子旁边。我怎样才能解决这个问题？我用引导程序 4 制作了表格，这是必需的。我尝试固定桌子的位置，但它覆盖了桌子顶部的图像，当我移除固定时，它们保持在同一行，你必须向左或向右滚动。

HTML：

<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：

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

标签： htmlcssbootstrap-4

解决方案

    <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>
<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 属性添加到图像样式以及高度中，以使其响应并定位到代码中。

推荐阅读