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