Я пытаюсь воссоздать это, но я застрял на том, чтобы изображение и текст помещались внутри самой внутренней границы. финал должен иметь внешнюю границу, внутреннюю границу и div, который расширяется сверху. Затем изображение, которое составляет 30% ширины верхнего охвата div. Затем текст, который должен иметь ширину 70% от верхнего охвата div.
Это то, что я получил до сих пор HTML:
:root {
--winter-primary: #ffd110;
}
.outside-winter-border {
border: 2px solid var(--winter-primary);
margin: auto;
max-width: 1000px;
}
.insdie-winter-border {
border: 2px solid var(--winter-primary);
margin: 20px;
}
.wh {
background-color: var(--winter-primary);
padding: 30px;
}
.winter-image {
width: 30%;
float: left;
}
.wi {
width: 70%;
float: right;
}
<section class = "winter">
<div class = "outside-winter-border">
<div class = "insdie-winter-border">
<div class = "section-heading">
<div class = "wh">
<h2>Winter</h2>
</div>
</div>
<div class = "content-wrapper">
<div class = "winter-image">
<div class = "section-image">
<a href = "winter.html">
<img src = "assets/images/winter.jpg" alt = "Winter Image">
</a>
</div>
</div>
<div class = "wi">
<div class = "section-content">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit dolore enim sequi dignissimos vel fugit reiciendis minus voluptatem nostrum, at repellat odio libero cum eveniet officiis, cumque veritatis, qui eaque.
</p>
</div>
</div>
</div>
</div>
</div>
</section>
Я думаю, вы можете попробовать это (вместо .winter-image и .wi ):
.content-wrapper {
display: flex;
}
.winter-image {
flex: 3;
}
.wi {
flex: 7;
}
Точный желаемый результат неясен. Однако вот версия с использованием flex
, которая получает и изображение, и текст внутри рамки. Не используйте float
.
.outside-winter-border {
border: 2px solid var(--winter-primary);
margin: auto;
max-width: 1000px;
}
.insdie-winter-border {
border: 2px solid var(--winter-primary);
}
img {
height: 100%;
}
.wh {
display: inline-flex;
}
.insdie-winter-border {
display: flex;
align-items: center;
}
:root {
--winter-primary: #ffd110;
}
p {
margin-left: 1em;
}
.section-heading {
width: 100%;
background-color: var(--winter-primary);
text-align: center;
}
.section-heading>h2 {
margin: 0;
}
<section class = "winter">
<div class = "outside-winter-border">
<div class = "section-heading">
<h2>Winter</h2>
</div>
<div class = "insdie-winter-border">
<div class = "wh">
<a href = "winter.html">
<img src = "https://dummyimage.com/125/000/fff" alt = "Winter Image">
</a>
</div>
<div class = "content-wrapper">
<div class = "winter-image">
</div>
<div class = "wi">
<div class = "section-content">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit dolore enim sequi dignissimos vel fugit reiciendis minus voluptatem nostrum, at repellat odio libero cum eveniet officiis, cumque veritatis, qui eaque.
</p>
</div>
</div>
</div>
</div>
</div>
</section>
@confusedcoder Посмотреть правки