css - 如何将标题定位在某个位置？

我相信这就是你想要的：预览

基本上，您可以将标题（图像 + 文本）包装到 CSS flexbox 中，并将其余内容包装到另一个 flexbox 中。我编辑了 CSS 文件以反映这些更改。希望这可以帮助！如果您还有其他问题，请告诉我。

这是 jsfillde 的链接：https ://jsfiddle.net/rzLbkw9m/

这是html文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="holiday.css" rel="stylesheet" type="text/CSS">

    <title>Task 4</title>
</head>
<body>

<div class="header-container">
    <div class="header-image">
        <img src="https://st.depositphotos.com/1115174/1875/v/450/depositphotos_18752455-stock-illustration-summer-beach-vacation-background.jpg" alt="Holiday" width="400" height="200" align="left">
    </div>
    <div class="header-text">
        <h1>Holiday Time</h1>
        <h3>Get away from it all</h3>
    </div>

</div>

<div class="row">

    <div class="list-column">
        <ul class="list">
            <li><a href="">Destinations</a></li>
            <li><a href="">Deals</a></li>
            <li><a href="">Flights</a></li>
            <li><a href="">Cruise</a></li>
            <li><a href="">Extras</a></li>
            <li><a href="">Money</a></li>
        </ul>
    </div>

    <div class="main-column">
        <div class="paragraph">
            <p>
                <img src="https://images.pexels.com/photos/88212/pexels-photo-88212.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Holiday" width="220" height="150" align="right" class="intext-img">

                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec ultrices libero eu eros viverra, eget tristique ipsum commodo. Phasellus tempus a erat quis hendrerit. Quisque ipsum felis, vestibulum sed finibus vel, molestie id ante. Morbi metus leo, dictum nec pellentesque nec, condimentum quis magna. Praesent est turpis, pharetra non fermentum sed, elementum ac ante. Integer sodales metus id rutrum hendrerit. Phasellus vel dapibus massa, ut aliquet arcu. Ut consectetur feugiat neque, sed sagittis dui rutrum eget. Maecenas commodo mattis enim quis lacinia. Duis in ipsum vitae mi laoreet dignissim. Nullam consequat velit at magna commodo, in fringilla enim rutrum. Cras at augue sed nisl ultricies lobortis. Praesent rhoncus lectus facilisis, rhoncus purus et, luctus eros. Nunc eros nisi, finibus sit amet urna quis, posuere ultrices mauris.

                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quis lorem vel neque bibendum iaculis vel id tellus. Nulla auctor elit vitae sollicitudin ultrices. Fusce molestie dictum neque, et dictum magna iaculis eget. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed volutpat, augue eget tincidunt feugiat, felis mi vulputate sem, eu mattis nisi quam sit amet est. Cras eu sem nec metus iaculis tempus sit amet non sapien. Aenean id odio semper purus dignissim elementum. Vestibulum faucibus mi ac odio hendrerit venenatis. Cras rhoncus diam magna, at placerat quam rutrum ut.
            </p>
        </div>

        <div class="paragraph">
            <p>
                <img src="https://i.pinimg.com/474x/c6/60/24/c66024ea79527d9bbafe79ed171558b9--luxury-travel-luxury-hotels.jpg" alt="Holiday" width="220" height="150" align="right" class="intext-img">

                Quisque fringilla sodales lorem eget rhoncus. Curabitur pulvinar blandit justo nec volutpat. Mauris bibendum lobortis quam et aliquam. Nulla dictum varius est, sed fringilla ante volutpat ac. Sed tempus dolor diam, ac porta ligula sagittis ac. Morbi vitae nisi porttitor, sollicitudin urna non, tempus justo. Donec vel vulputate est. Donec aliquet vitae velit eu interdum. Quisque et facilisis diam. Duis rutrum faucibus purus at tempus. Mauris auctor tincidunt mauris, quis porttitor magna aliquam molestie. Aliquam efficitur, ex sed finibus porta, tellus diam dictum arcu, ac egestas quam enim tristique velit. Integer volutpat tortor et tortor consequat tincidunt. Donec imperdiet libero vitae sapien commodo, eget pretium libero eleifend. Sed mi felis, porttitor vel blandit laoreet, pretium a felis. Duis in erat interdum, rutrum lectus viverra, pellentesque elit. Sed imperdiet massa ullamcorper mauris tempus, at euismod nibh convallis. In sapien lorem, lacinia eget viverra sit amet, suscipit in diam. Phasellus at sapien eu orci pellentesque eleifend suscipit eu diam. Vivamus quis nibh id sem placerat rutrum. Nunc pellentesque aliquet congue.

                Nam at eros elementum, venenatis nibh vel, volutpat mi. Donec varius sapien ipsum, sed sagittis ligula iaculis hendrerit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent pharetra ante eget purus rhoncus, ac pharetra eros fermentum. Etiam porta nec leo pretium gravida. Integer a nulla quam. In ullamcorper, nibh id efficitur porttitor, lacus mi semper nisi, id pulvinar ex leo at mi. Vestibulum placerat lacus vitae velit laoreet, in efficitur risus convallis. Nunc at sagittis dolor, eu gravida nunc. In hac habitasse platea dictumst. Mauris vitae lobortis ipsum, quis rhoncus mauris. Ut eget nibh sed dolor sollicitudin dictum efficitur ac ligula. Nullam ut nulla sit amet leo varius tincidunt.
            </p>
        </div>

    </div>
</div>

<div class="footer"> Contact: 0191 227 1111</div>

</body>
</html>

这是css文件：

/* header */
.header-container {
    display: flex;
    align-items: center;
    border: 1px solid lightblue;
}

.header-text {
    margin-left: 25px;
}

.header-text h1 {
    color: purple;
    font-size: 48px;
}

.header-text h3 {
    margin-left: 20px;
}



/* navbar */
.list-column {
    flex: 30%;
    align-self: flex-start;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}

li a:first-of-type {
    padding-top: 2px;
}



/* main content */
.row {
    margin-top: 10px;
    display: flex;
    align-items: flex-start;
}

.paragraph {
    margin-bottom: 25px;
}

.intext-img {
    margin-top: 5px;
    margin-left: 10px;
    margin-bottom: 10px;
}

p {
    font-size: 18px;
    margin: 0px;
}



/* footer */
.footer {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 0.8rem;
    text-align: left;
    background-color: #64A3D6;
}

css - 如何将标题定位在某个位置？

问题描述

解决方案

推荐阅读