так что у меня есть этот код
<div class="contentBlock">
<div id="profileBlock">
<div id="imageContainer"></div>
<div id="textBlock">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
css
.contentBlock
{
display: inline-block;
width: 100%;
height: 100%;
}
#profileBlock
{
text-align: center;
margin: 25px 25px;
height: 350px;
}
#textBlock
{
width: 50%;
display: inline-block;
margin: 0px 25px;
}
#imageContainer
{
vertical-align: top;
display: inline-block;
width: 250px;
height: 300px;
background-image: url('http://placehold.it/250x300');
background-repeat: no-repeat;
}
https://jsfiddle.net/h21f2882/
По сути, это раздел моего сайта-портфолио. Я пытаюсь разместить изображение заполнителя рядом с моим текстом. Однако, когда я изменяю размер своего браузера, текст оказывается под изображением, и это не та проблема, которую я пытаюсь решить. Однако проблема в том, что контейнер не масштабируется. Позволить всему textBlock
div выйти за его границы.
Теперь у меня два вопроса:
Если бы я сделал медиа-запрос, в котором я бы изменил дисплей обратно на блок и изменил размер
profileBlock
на X пикселей. Будет ли это плохой практикой, поскольку я буду использовать магическое число для установки высоты?Как я могу изменить высоту этого контейнера, чтобы он соответствовал его дочерним элементам после этого события?
Спасибо нападающему Максу Бикмансу