Question

我正在尝试学习div的方法，我正在尝试将我正在编写的网站与属性float对齐，尽管它似乎不像我想要的那样工作。你能看一下我的代码吗？谢谢！

enter image description here

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title>Walt Disney Concert Hall</title>
        <meta http-equiv = "Content-type" content = "text/html; charset=UTF-8" />
        <link rel = "stylesheet" type = "text/css" href = "style.css" />
    </head>
    <body>
        <div id = "container">
            <!-- HEADER -->
            <div id = "header">Walt Disney concert hall</div>
            <!-- MENU -->
            <div id = "menu">
                <a href = "home.html">Home</a>
                <a href = "familyprograms.html">Family programs</a>
                <a href = "visit.html">Visit</a>
                <a href = "tickets.html">Concert tickets</a>
            </div>
            <!-- TEXT -->
            <div id = "text">
                <h3>Holiday sing-along</h3>
                <p>End the year in song by bundling up and celebrating the sounds of the season 
                under the cool wintry skies. Sing-along with live musical accompaniment. Lyric 
                sheets are provided. No experience necessary.
                <p>FREE admission. Tickets are distributed beginning at 6:00 p.m., while supplies 
                last. One ticket per person to those waiting in line. Seating capacity is limited. 
                First come, first served.</p>
            </div>
            <!-- IMAGES -->
            <div id = "images">
                <img src = "6_1.jpg" alt = "Classical" />
                <img src = "6_2.jpg" alt = "Jazz" />
                <img src = "6_3.jpg" alt = "World" />
                <img src = "6_4.jpg" alt = "Pop" />
                <img src = "6_5.jpg" alt = "Family and others" />
            </div>
            <!-- VOTE AND EVENTS -->
            <div id = "voteandevents">
                <form method = "get" name = "form_mostliked" action = "send.php">
                    <fieldset>
                        <legend>Vote</legend>
                        What do you like the most?
                        <br />
                        <input type = "radio" name = "radio_mostliked" value = "Ballet" checked = "checked" />
                        <br />
                        <input type = "radio" name = "radio_mostliked" value = "Operett" />
                        <br />
                        <input type = "radio" name = "radio_mostliked" value = "Opera" />
                        <br />
                        <input type = "radio" name = "radio_mostliked" value = "Other" />
                        <br />          
                        <input type = "submit" name = "btn_submit" value = "send" />

                        <h3>Upcoming events:</h3>
                        <ol>
                            <li>Spotlight awards</li>
                            <li>Grupo Corpo</li>
                            <li>Deneve conducts Debussy</li>
                            <li>Natalie Cole - JAZZ</li>
                        </ol>
                    </fieldset>
                </form>
            </div>
        </div>
    </body>
</html>

CSS

body{
    background: url("bg6.gif") repeat;
}

#container{
    width: 795px;   
    margin: auto;
    overflow: hidden;
    border: 5px dashed #000;
}

#header{
    background-image: url("header6.jpg");
    width: 800px;
    height: 150px;
    text-align: right;
}

#menu{
    float: left;
    height: 35px;
    width: 550px;
    background: url("cell-bg6.gif") repeat-x;

}

#text{
    width: 550px;   
    float: left;
    text-align: justify;
}

#text p {
    text-indent: 20px;
}

#images{
    float: left;
    height: 173px;
    background-color: #000;
    clear: left;
    padding: 7px;
    width: 550px;
}

#voteandevents{
    float: right;
    width: 200px;   
}

Answer 1

可以在 #menu 之前移动 #voteandevents 你的css没有变化。

无法使float属性和div正常工作

1 个答案: