Question

我试图在没有导航菜单的情况下排除这个段落并且徽标没有到位。我尝试将所有内容都联机，但我没有运气。接下来我尝试使用float属性，这让事情变得更糟。我搜索过W3C和Codecademy，仍然没有得到任何东西。

这是HTML：

    <!-- BACKGROUND -->
<body id = "background">

<!-- PASTICCERIA ITALIA -->
<!-- <a id = "logo" href = "home.html"> <img src = "images/logo.png"> </a> -->


<!-- NAVIGATION LINKS-->
<!-- <div id = "navibar">
    <nav>

        <a class = "navibar" href = "aboutthebakery.html"> ABOUT THE BAKERY </a>

        <a class = "navibar" href = "bakeryselection.html"> BAKERY SELECTION </a>

        <a class = "navibar" href = "viewthemenu.html"> VIEW THE MENU </a>

        <a class = "navibar" href = "visitalocation.html"> VISIT A LOCATION </a>

        <a class = "navibar" href = "http://example.com/--.html"> WEDDINGS & OCCASIONS </a>

        <a class = "navibar" href = "http://example.com/--.html"> CATERING 
        </a>

    </nav>
</div> -->

<h2 id = "about_heading"> ABOUT THE BAKERY </h2>    

<img id = "greenbar1" alt = "greenbar1" src = "images/greenbar1.png"> 

<div id = "about_paragraph">

    <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor... </p>

</div> 

<img id = "greenbar2" alt = "greenbar2" src = "images/greenbar2.png">

<h3 id = "meet_heading"> MEET OUR TEAM </h3>

这是CSS：

/* BACKGROUND */
#background {

    background-margin-top: 0%;
    background-margin-right: 0%;
    margin-bottom: 0%;
    margin-left: 0%;

    background-image: url("images/background.png");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: 50% 50%;
    background-color: #fffee3;
}

#logo {
    margin-top: 0%;
    margin-right: 30%;
    margin-bottom: 0%;
    margin-left: 0%;
}

/* NAVIGATION */
nav {
    list-style: none;

    margin-top: 0%;
    margin-right: 0%;
    margin-bottom: 0%;
    margin-left: 0%;

    padding-top: 0%;
    padding-right: 0%;
    padding-bottom: 0%;
    padding-left: 0%;
}

/* NAVIGATION DIV CONTAINING LINKS */
#navibar {
    text-align: center;

    margin-top: 3%;
    margin-right: 48%;
    margin-bottom: 0%;
    margin-left: 8%;
}

.navibar {
    display: block;

    margin-top: 0%;
    margin-right: 0%;
    margin-bottom: 0%;
    margin-left: 0%;

    padding-top: 2%;
    padding-right: 0%;
    padding-bottom: 0%;
    padding-left: 0%;

    color: #000000;

    text-decoration: none;

    font-size: 12px;
    font-family: Verdana; 
}

.navibar:hover {
    color: #c92727;

    text-decoration: none;

    font-size: 12px;
    font-family: Verdana; 
}

/* ABOUT THE BAKERY */
#about_heading {
    text-align: center;

    font-family: Georgia;

    margin-top: 8%;
    margin-right: 0%;
    margin-bottom: 0%;
    margin-left: 20%;
}

#greenbar1 {
    margin-top: 0%;
    margin-right: 0%;
    margin-bottom: 0%;
    margin-left: 50%;
}

#about_paragraph {
    text-align: justify;

    font-family: Verdana;
    font-size: 14px;

    margin-top: 0%;
    margin-right: 22%;
    margin-bottom: 0%;
    margin-left: 42%;

    padding-top: 0%;
    padding-right: 0%;
    padding-bottom: 0%;
    padding-left: 0%;
}

#greenbar2 {
    margin-top: 0%;
    margin-right: 0%;
    margin-bottom: 0%;
    margin-left: 55%;
}

#meet_heading {
    text-align: center;

    font-family: Georgia;

    margin-top: 0%;
    margin-right: 0%;
    margin-bottom: 0%;
    margin-left: 20%;
}

Answer 1

使其有效：

1）我尝试从#navibar中删除margin-right和margin-bottom 2）添加一个浮点数：左边是#navibar。 3）我把所有内容都包含在内容和内容中。 div如图所示：

<div class="content">
<h2 id = "about_heading"> ABOUT THE BAKERY </h2>    
<img id = "greenbar1" alt = "greenbar1" src = "images/greenbar1.png"> 
<div id = "about_paragraph">
    <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor... </p>
</div> 
<img id = "greenbar2" alt = "greenbar2" src = "images/greenbar2.png">
<h3 id = "meet_heading"> MEET OUR TEAM </h3>
</div>

4）我在css中添加了

.content {float: right;width: 70%;}

更新：请在此处找到小提琴：http://jsfiddle.net/33bb7/

将嵌段元素内联后排列时遇到问题

1 个答案: