Мне нужна помощь с этим простым примером, который я разработал, чтобы понять макеты, связанные с INLINE-BLOCK. Все просто: левая и правая части, а внутри правая - элементы вверх и вниз. Я хочу, чтобы правая часть была в центре [ширина экрана минус левая часть], а внутри правой части элементы h3 и p выровнены по левому краю. Я добавил границу только для того, чтобы понять, полностью ли я использовал пространство правого экрана. Иногда мои руки связаны, поэтому я не могу изменить HTML, поэтому мне нужен чистый метод CSS.
Я читал некоторые из подобных вопросов здесь, но после некоторых тестов я все еще потерялся - например, давая ширину: 500px правой части? но мне нужна правая часть в центре для разных экранов! Другая проблема: правая часть text-align: центр также будет влиять на внутренние элементы; внутри элементов text-align: left также повлияет на правую часть.
Обратите внимание: речь идет о встроенном блоке .... и чистом CSS.
Ценю любой ответ.
.left{
display:inline-block;
background:aqua;
}
.right{
border:solid;
display:inline-block;
}
<OCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="whole">
<div class="left"><p>lefter</p></div>
<div class="right">
<h3>upperright</h3>
<div class="lowerright"><p>sdfsdfsdfsdfsdfsdd</p>
</div>
</div>
</div>
</body>
</html>
Прикрепленное изображение показывает мою мысль. 