文章/答案/技术大牛

发布

社区首页 >问答首页 >为什么CSS浮动属性在内容下面重叠？

问为什么CSS浮动属性在内容下面重叠？
EN

Stack Overflow用户

提问于 2021-06-27 20:34:28

回答 1查看 52关注 0票数 0

我对我的CSS浮点属性的对齐方式有问题。在“关于我”部分中，我希望<p>元素位于图像的右侧，然而，我的"Portfolio“部分中的文本和信息也在图像周围浮动。我如何格式化它，使"About Me“部分中的文本是唯一环绕在图像周围的文本，并且"portfolio”横幅/标题位于自己的行上，并像块元素一样工作？

<html>
<head>
<title>About</title>
<style>
    #aboutImage, #headerImage{
        display: block;
        margin-right: auto;
        margin-left: auto;
        text-align: center;
    }
    #about, #portfolio{
        background-color: #ff80d5;
        font-family: Gill Sans, sans-serif;
        text-align: left;
        vertical-align: center;
        color: white;
        font-weight: 100;
        block-size: 50px;
        display: flex;
        align-items: center;
        padding-left: 2%;
        
    }

    #portraits, #stationary{
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        font-family: Gills Sans, sans-serif;
        color: #ff80d5;
        font-weight: 200;
    }
    p{
        font-family: Gill Sans, sans-serif;
        font-size: 18px;
        color: #ff80d5;
        border-style: dotted;
        text-indent: 15px;
    }
    #menu, ul li{
        text-align: center;
        display: inline;
        font-family: Gill Sans, sans-serif;
        font-size: 22px;
        padding: 3%;
    }
    a{
        text-decoration: none;
        color: #ff80d5; 
    }
    #caption{
        color: #ff80d5;
        font-family: Gill Sans, sans-serif;
        font-size: 22px;
        text-align: center;
        margin-top: 30%;
    }
    #portfolioImg{
        width: 353px;
        height: 447px;
        margin-left: auto;
        margin-right: auto;
    }
    #portraitGrid, #stationaryGrid{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        justify-items: center;
        align-items: center;
        justify-content: center;
        align-content: center;
        grid-row-gap: 25px;
        padding: 15px;
    }
    #aboutImage{
        float: left;
    }
    #portfolioBlock{
        display:block;
    }
        

</style>
</head>

<body>
    <img ID ="headerImage" src = "Images/Origami Mami Logo.jpeg">
    <div ID = "menu">
    <ul>
        <li> <a href = "">Portfolio </a></li>

        <li> <a href = "">Video</a></li>

        <li><a href = "">Contact</a></li>
    </ul>
    </div>

    <div ID="aboutMe">
    <h1 ID = "about">About Me</h1>

    <br>

    <img ID = "aboutImage" class= "alignLeft" src = "Images/Ms. Mami.jpeg">

    <p class="aboutText"> A Brooklyn native, Origami Mami (Kevin) has been folding for over 15 years. After a friend taught him how to fold an origami flower pot, 
        Origami Mami has been folding almost non-stop since. After a family member was diagnosed with Breast Cancer, and later another with AIDS, 
        he folded and gifted anything he made. The joyful and positive reactions from his sick loved ones gave him the greatest feeling, and which 
        led him to contiuosly fold.
    </p>
    
    <p>Originally teaching himself how to fold anything he found instructions to on the internet, he began adding greater color to his work by 
        making portraits and stationary cards. Now you can spread the same love and joy Origami Mami gave to his loved ones to yours. All portaits 
    and cards are created with careful attention to color, shapes, and patterns.
    </p>
    </div>

    <div ID = "portfolioBlock">

    <h1 ID = "portfolio">Portfolio</h1>
    <p>Each piece of work is carefully thought out in regards to color, paint, origami design, and overall works. Some designs are simple, while
        others a bit more abstract. The statement and takeaway message in each of these pieces is simply, love! With both portraits and stationary
        each piece can easily be gifted, and portraits can be used as decor for home, and/or offices, which helps upkeep the spread of joy. 
    </p>
    </div>

image

css-float

html

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-06-27 20:52:09

将overflow: hidden;添加到#aboutMe (或任何其他类似元素)，使后续元素在其下面开始，即使它包含浮动元素。

#aboutImage,
#headerImage {
  display: block;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

#about,
#portfolio {
  background-color: #ff80d5;
  font-family: Gill Sans, sans-serif;
  text-align: left;
  vertical-align: center;
  color: white;
  font-weight: 100;
  block-size: 50px;
  display: flex;
  align-items: center;
  padding-left: 2%;
}

#portraits,
#stationary {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  font-family: Gills Sans, sans-serif;
  color: #ff80d5;
  font-weight: 200;
}

p {
  font-family: Gill Sans, sans-serif;
  font-size: 18px;
  color: #ff80d5;
  border-style: dotted;
  text-indent: 15px;
}

#menu,
ul li {
  text-align: center;
  display: inline;
  font-family: Gill Sans, sans-serif;
  font-size: 22px;
  padding: 3%;
}

a {
  text-decoration: none;
  color: #ff80d5;
}

#caption {
  color: #ff80d5;
  font-family: Gill Sans, sans-serif;
  font-size: 22px;
  text-align: center;
  margin-top: 30%;
}

#portfolioImg {
  width: 353px;
  height: 447px;
  margin-left: auto;
  margin-right: auto;
}

#portraitGrid,
#stationaryGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: center;
  align-items: center;
  justify-content: center;
  align-content: center;
  grid-row-gap: 25px;
  padding: 15px;
}

#aboutImage {
  float: left;
}

#portfolioBlock {
  display: block;
}
#aboutMe {
  overflow: hidden;
}

<img ID="headerImage" src="http://lorempixel.com/400/300">
<div ID="menu">
  <ul>
    <li> <a href="">Portfolio </a></li>

    <li> <a href="">Video</a></li>

    <li><a href="">Contact</a></li>
  </ul>
</div>

<div ID="aboutMe">
  <h1 ID="about">About Me</h1>

  <br>

  <img ID="aboutImage" class="alignLeft" src="http://lorempixel.com/400/600" />">

  <p class="aboutText"> A Brooklyn native, Origami Mami (Kevin) has been folding for over 15 years. After a friend taught him how to fold an origami flower pot, Origami Mami has been folding almost non-stop since. After a family member was diagnosed with Breast Cancer, and
    later another with AIDS, he folded and gifted anything he made. The joyful and positive reactions from his sick loved ones gave him the greatest feeling, and which led him to contiuosly fold.
  </p>

  <p>Originally teaching himself how to fold anything he found instructions to on the internet, he began adding greater color to his work by making portraits and stationary cards. Now you can spread the same love and joy Origami Mami gave to his loved ones
    to yours. All portaits and cards are created with careful attention to color, shapes, and patterns.
  </p>
</div>

<div ID="portfolioBlock">

  <h1 ID="portfolio">Portfolio</h1>
  <p>Each piece of work is carefully thought out in regards to color, paint, origami design, and overall works. Some designs are simple, while others a bit more abstract. The statement and takeaway message in each of these pieces is simply, love! With both
    portraits and stationary each piece can easily be gifted, and portraits can be used as decor for home, and/or offices, which helps upkeep the spread of joy.
  </p>
</div>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/68155061

复制

相似问题

问为什么CSS浮动属性在内容下面重叠？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么CSS浮动属性在内容下面重叠？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么CSS浮动属性在内容下面重叠？
EN