个人中心
gpt4 book ai didi

css - 我将如何移动导航栏旁边的段落？

转载 作者：太空宇宙 更新时间：2023-11-04 06:47:38 25 4
gpt4 key购买 nike

我目前正在为我的类(class)做一个元素，我遇到了一些我坚持的东西，我对 HTML 还很陌生，所以任何帮助都将不胜感激!我的任务是制作一个复制图 1 中图片内容的网站。

目前这是我的样子(图 2)。我想知道如何移动该段落，使其处于与图 1 所示的类似位置。任何其他提示也将不胜感激，

提前致谢!

Figure 1

Figure 2 

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

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

.header img {
  float: left;
  width: 100px;
  height: 100px;
  background: #555;
}

.header h1 {
  position: relative;
  top: 18px;
  left: 10px;
}

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

.paragraph {
  width: 90%;
  margin-left: 10%;
}

img {
  margin-right: 10px;
  margin-bottom: 5px;
}
<!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>
  <img src="holiday1.jfif" alt="Holiday" width="400" height="200" align="left">
  <h1>Holiday Time</h1>
  <br>
  <h3>Get away from it all</h3>

  <ul>
    <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 class="paragraph">

    <p>
      <img src="holiday2.jpg" alt="Holiday" width="200" height="100" align="right"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque rhoncus tincidunt dapibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam id mattis est.
      Vivamus consequat orci ante, in gravida lacus tristique ac. Phasellus lobortis sollicitudin magna, quis euismod lacus vestibulum quis. Sed volutpat dolor finibus lorem tempus vulputate. Duis et nisi eu lorem rhoncus venenatis. Vivamus sodales orci
      et felis elementum, at porttitor ex convallis. Aliquam feugiat velit in sapien tristique euismod. Donec tincidunt, purus eget placerat volutpat, risus quam bibendum risus, a ultrices est nisl quis diam. Cras accumsan ex in dictum posuere. Fusce
      cursus tincidunt velit, vel finibus turpis. Vestibulum cursus elit erat, eu elementum dui dapibus vel. Quisque vulputate at neque a mattis. Nulla facilisi. Aenean volutpat lorem vel nisi tincidunt, ut dignissim leo gravida.


    </p>

    <p>
      <img src="holiday3.jfif" alt="Holiday" width="200" height="100" align="right"> Cras id mollis nisl, pharetra pulvinar lacus. Sed urna ipsum, pulvinar ut tincidunt in, laoreet a tellus. Mauris ut libero libero. Nullam a tempus arcu, sit amet convallis
      elit. Donec urna metus, varius at porta vitae, scelerisque sed erat. Vivamus et libero sed nibh egestas eleifend. Suspendisse vel diam at diam vulputate egestas. Nunc egestas eros quis orci elementum, ut porta nibh bibendum. Sed bibendum sapien
      mauris, in iaculis sapien scelerisque quis. Nunc tempus consectetur sapien in ullamcorper. Etiam fermentum, eros vel convallis consectetur, tortor risus porta nulla, sit amet aliquam libero neque sit amet mauris. Pellentesque auctor aliquam tincidunt.
      Curabitur aliquet iaculis venenatis. Praesent at dui eu ligula laoreet rhoncus. Donec rutrum, mauris vel commodo venenatis, tortor ipsum fringilla risus, non cursus tortor erat nec metus. Donec sagittis, leo quis egestas semper, velit sapien tempor
      mauris, non volutpat turpis ipsum a dolor.



    </p>

  </div>


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


</body>

</html>

最佳答案

我相信这就是您想要的: preview

这是 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;
}

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

关于css - 我将如何移动导航栏旁边的段落？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53162445/

25 4 0
文章推荐： c - 为什么我不能将 i 等于 0？
文章推荐： java - 二维阵列扫雷器周围的地雷
文章推荐： python - 如果我在 python 中使用 for 循环，我需要将用于计数的变量设置为 0 还是 for 循环会设置它？
文章推荐： c - 如何从文本文件中将数据作为字符读取，然后将每个字符除以一个 int
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com