Как поместить div внутри большего div с каким-нибудь украшением?

Question

Я новичок в веб-дизайне, я хотел бы создать шаблон, как на изображении ниже, с CSS? и как сделать так, чтобы высота большого div динамически изменялась в зависимости от его содержания

введите описание изображения здесь

Мой HTML код

  <section class="results">
    <h2>The result</h2>
    <div id="results"></div>
  </section>

Мой CSS код

.results h2 {
   background-color: rgb(138, 17, 68);
   width: fit-content;
   border-radius: 5px;
   padding: 5px 15px;
   color: blanchedalmond;
   font-size: 30px;
}
.results {
   background-color:rgba(255, 228, 225,0.5);
   border: rgba(0, 0, 0,.5);
   max-width: 75vw;
   height: fit-content;
   border-radius: 10px;
   box-shadow: 0 0 5px rgba(0, 0, 0,.5);
   margin-left: 50%;
   margin-right: -50%;
   transform: translate(-50%);
}

Answer 1

Я думаю, что одна из проблем, с которыми вы столкнулись при центрировании h2, была установка width: fit-content;. Подходящий контент использует все доступное пространство, которое может, и не меньше, чем доступный контент. И учитывая, что это тег заголовка, его свойство display по умолчанию равно display: block;, поэтому он использует all пространство любого контейнера, в котором он находится. Переключение на width: max-content; делает его таким, чтобы он использовал только как много места, сколько нужно, но не меньше, поэтому он не переносится на другую строку.

Для большого div, если вы не укажете высоту вручную, по умолчанию будет height: auto; и будет полностью реагировать автоматически. Вы можете установить свойство min-height, если вы хотите, чтобы оно не было go ниже определенной высоты, но больше ничего не нужно делать.

Кроме того, глядя на ваш код, это не совсем как работает пограничная собственность. Идет border: [width of a border(pixels|em|rem)][style of border(solid|dashed|dotted)][color of border(hex|rgba)], прямо сейчас у вас есть только указанный цвет.

Вот модифицированный код. Это не идеально, и я, честно говоря, вероятно, использовал бы display: flex; для центрирования элементов в середине, но, похоже, он достаточно близко соответствует вашему дизайну.

HTML

<section class="results">
  <h2>Results</h2>
  <div id="results">
    Placeholder text, add whatever you want.
  </div>
</section>

CSS

.results {
  margin: 0 auto;
  width: 80%;
  max-width: 500px;
}

.results h2 {
  background-color: white;
  width: max-content;
  margin: 0 auto;
  border-radius: 5px;
  padding: 5px 15px;
  font-size: 30px;
  box-shadow: 0 0 5px rgba(0, 0, 0,.5);
  border: 1px solid black;
  transform: translateY(50%);
}

#results {
  padding: 35px 15px 15px 15px;
  background-color: white;
  border: 1px solid black;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0, 0, 0,.5);
}