我如何将段落移动到导航栏旁边？

时间：2018-11-05 21:23:38

标签： html css html5

我目前正在为我的课程做一个项目，遇到了一些我坚持的事情，我对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>

2 个答案:

答案 0 :(得分：1)

我相信这是您想要的： 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/

答案 1 :(得分：0)

您可以使用CSS属性flex，简单示例为here。

CodePen上的工作示例

HTML：

<img src="holiday1.jfif" alt="Holiday" width="400" height="200" align="left">

<h1>Holiday Time</h1>
<br />
<h3>Get away from it all</h3>

<!-- Row -->
<div class="row">

    <!-- 1st column -->
    <div class="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>

    <!-- 2nd column -->
    <div class="column">
        <img src="holiday2.jpg" alt="Holiday" width="200" height="100" align="right"> 
        Lorem Ipsum
    </div>

</div>


CSS：

将此添加到当前CSS 

.row {
  display: flex;
  margin-top: 90px;
}

/* Create two equal columns that sits next to each other */
.column {
  flex: 50%;
  padding: 10px;
}
相关问题
最新问题