Как правильно отображать веб-страницу на мобильном устройстве

ProgramBox

Как правильно отображать веб-страницу на мобильном устройстве

Post author:admin
Запись опубликована:3 ноября, 2022
Post category:Вопросы по программированию

#html #css #bootstrap-4

#HTML #css #bootstrap-4

Вопрос:

Итак, у меня есть таблица и изображение, на ПК все работает нормально, они находятся рядом друг с другом, но на мобильных устройствах изображение должно быть под таблицей, но оно либо перекрывает таблицу, либо остается рядом с ней. Как я могу это исправить? Я создал таблицу с помощью bootstrap 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;
}

Ответ №1:

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

Развернуть фрагмент кода

Я добавил свойство выравнивания текста в стиль изображения, а также высоту, чтобы сделать его отзывчивым и расположить в коде.

Вопрос:

Ответ №1:

Вам также может понравиться

как объединить фреймы данных в цикле в pyspark

Node.js , Windows, fs.open() — нежелательный флаг только для чтения во вновь созданном файле

Сокет Linux TCP в режиме блокировки