使块元素内联后难以排齐它们

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）添加了一个float：left到#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 个解决方案

解决方案1
0 2014-04-09 05:34:15

使块元素内联后难以排齐它们

问题描述

1 个解决方案

解决方案1 0 2014-04-09 05:34:15

解决方案1
0 2014-04-09 05:34:15