Одна коробка не подходит для разных разрешений экрана - PullRequest
0 голосов
/ 15 декабря 2018

Я работаю над одним сайтом уже некоторое время.На главной странице у меня есть поле слева, которое показывает признания, а прямо рядом с этим полем у меня есть еще одно поле, которое отображает наиболее понравившиеся признания.Теперь поле слева соответствует размеру экрана при любом разрешении экрана, но правый сначала идет внутрь, когда разрешение экрана ниже.Я выложу фотографии, описывающие мою проблему.Как добиться того, чтобы оба бокса хорошо подходили друг другу, а когда разрешение экрана ниже, я не хочу, чтобы они стали беспорядочными.Мой экран 1920x1080, и этот блок не будет подходить, если экран 1900, поэтому он будет работать чуть выше ширины 1900.

Моя левая рамка CSS:

.confessbox { 
    background-color: rgba(50, 50, 50, .3);
    margin-top: 10px;
    width: 597px;
    float:right;

}

.confession {
    background-color: rgba(50, 50, 50, .4);
    font-size: 22px;
    font-weight: 300;
    padding: 3px 0;
    width: 578px;
    margin-left: 10px;
    margin-bottom: 10px;

}

.container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

Мой правый блок CSS:

.sidebox {
    float: right;
        left: -24%;
        margin-top: 3.4%;
        width: 300px;
    height: 150px;
    top:20px;
    position: relative;
        transform: translate(-50%, -50%);
}

Мой HTML внутри этих блоков довольно большой, поэтому я просто объясню, содержимое внутри левого блока выглядит так:

<div class=container">
<div class="confessBox">
<div class="confession">

<!-- HERE GOES ALL ITS CONTENT -->

</div>
</div>

Содержимое внутри правого поля выглядит так:

<div class="sidebox">

<!-- HERE GOES ALL ITS CONTENT -->

</div>

В 1920x1080

На 1024x600, и только его видимый товар на ширине 1900 и выше

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

Ответы [ 2 ]

0 голосов
/ 15 декабря 2018

Один из способов решения этой проблемы - попытаться использовать css media query Вы можете добавить определенные правила css в зависимости от ширины экрана.

Это правило относится к окну с макс.-ширина 1900px применяет эти стили:

@media (max-width:1900px) { 
.sidebox {
 left: auto; /*restore to default*/
 right: -24%; /*push it to the right more*/
}
 }

вот jsfiddle Я сделал, если вы хотите проверить его там, может быть.

w3schools есть страница о СМИзапросы, если вы хотите прочитать об этом здесь

0 голосов
/ 15 декабря 2018
.leftsectionClassName,.rightsectionClassName{min-height:100vh}

100vh займет высоту полноэкранного окна просмотра.Какое бы ни было использование монитора разрешения, которое будет занимать высоту.

Надеюсь, он будет заполнен полностью.если у вас есть какие-либо сомнения, пожалуйста, дайте мне знать.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...