Я создал CMS, которая позволяет пользователям использовать редактор и перетаскивать изображения, а также текст и форматирование.
Я использую их с разными шаблонами, и в моем примере ниже используется шаблон сбольшая область содержимого в правой половине страницы и меньшие области содержимого в левой верхней и левой нижней частях.
Изображения хороши, но, как видно из фрагмента (вы должны запустить его и показатьэто в полноэкранном режиме, чтобы понять, что я имею в виду), хотя мои bottomLeftContent и rightContent области имеют тег p с text-align: center и справа, они оба перемещаются влево.
Теперь,если я осматриваю страницу и выключаю display:flex для среднего p, то они выровнены правильно, но это портит то, как должна отображаться моя страница (без прокрутки, поэтому области должны складываться вместе, как они есть.
Как сохранить гибкий экран, но разрешить работу встроенных p-стилей? (Также содержимое тегов p взято из редактора TinyMCE, поэтому я не могу жестко закодировать! Важный или что-то в этом роде)
html,
body {
height: 100vh;
width: 100vw;
overflow: hidden;
}
.middle p{
max-height:100%;
margin-bottom:0;
position: absolute;
top:0;
right:0;
bottom:0;
left:0;
display:flex;
}
img {
object-fit: scale-down;
width: 100%;
margin:0 auto;
}
#topLeftContent{
display:flex;
justify-content:center;
align-items:center;
overflow: hidden;
height:100%;
}
#topLeftContent img{
object-fit: contain;
}
.topLeftContent{
max-width: 100%;
max-height: 100%;
height: auto;
width: auto;
}
.topLeftContent> img{
min-width:100%;
min-height: 100%;
width: auto;
height: auto;
}
#bottomLeftContent{
display:flex;
justify-content:center;
align-items:center;
overflow: hidden;
height:100%;
background-color: blue;
}
#bottomLeftContent img{
object-fit: contain;
}
.bottomLeftContent{
max-width: 100%;
max-height: 100%;
height: auto;
width: auto;
}
.bottomLeftContent> img{
min-width:100%;
min-height: 100%;
width: auto;
height: auto;
}
#rightContent{
display:flex;
justify-content:center;
align-items:center;
overflow: hidden;
height:100%;
}
#rightContent img{
object-fit: contain;
}
.rightContent{
max-width: 100%;
max-height: 100%;
height: auto;
width: auto;
}
.rightContent> img{
min-width:100%;
min-height: 100%;
width: auto;
height: auto;
}
.my-container {
display: flex;
flex-direction: column;
justify-content: center;
height: 100vh;
width:100vw;
}
.my-container .top.row,
.my-container .row.bottom {
flex-shrink: 0;
}
.my-container>.top [class^="col-"],
.my-container>.bottom [class^="col-"] {
background-color: #778899 ;
color: white;
text-align: center;
}
.my-container>.middle {
flex-grow: 1;
padding:30px;
background-size: cover;
}
<html>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css" crossorigin="anonymous">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div class="container-fluid my-container">
<div class="row top">
<div class="col-lg-12">
<div class="row" style="background-color: #778899;">
</div>
</div>
</div>
<div class="row middle">
<div class="col-lg-6" >
<div class="row" style="height:50%; padding-bottom: 15px;">
<div class="col-lg-12" style="height:100%;">
<div class="topLeftContent" id="topLeftContent">
<p><img class="mySlides" src="images/Picture1.jpg" /></p>
</div>
</div>
</div>
<div class="row flex-center--horiz" style="height:50%; padding-top: 15px; background-color: tomato;">
<div class="col-lg-12" style="height:100%;">
<div class="bottomLeftContent" id="bottomLeftContent">
<p style="text-align: center; color: white;">SHOULD BE CENTERED</p>
</div>
</div>
</div>
</div>
<div class="col-lg-6" >
<div class="rightContent" id="rightContent">
<p style="text-align: right;">Paragraph over here</p>
</div>
</div>
</div><!--end row middle-->
<div class="row bottom">
<div class="col-lg-12">
<div><h2>Ticker</h2></div>
</div>
</div>
</div>
</body>
</html>