Question

我是网页设计新手，我有2个<div>标签，其中包含公告和欢迎数据。我想把它们放在彼此旁边。但相反，它们是彼此重叠的。

我尝试向左边移动一个div而另一边向div赋予宽度。但我仍然有一些问题。我正在尝试调整公告区域和欢迎区域div。这是我的代码：

HTML：

<body>
        <div id="page-wrap">    
            <ul id="nav" align="center">
                <li class="home"><a href="#">Home</a></li>
            <li class="directory"><a ref="#">Directory</a></li>             
                <li class="calender"><a href="#">Calender</a></li>
                <li class="photos"><a href="#">Photos</a></li>
                <li class="links"><a href="#">Links</a></li>                
            </ul>

            <div id="main-content">
                <div id="welcome-area">
                    <img src="Images/welcome-header.jpg" alt="header top" />
                    <div id="welcome-content">                      
                        <p>
                            Welcome to the official website of the Lambda Chi Alpha Delta Beta Zeta Chapter at NSU. 
                            This site will be used to inform members of events and show everyone what the fraternity 
                            is up too. Take a look around!
                        </p>
                    </div>
                </div>

                <div id="announcements-area">   
                    <img src="Images/announcements-top.jpg" alt="announcement top" />
                    <div id="announcements-content">
                        <h4 class="announcement-header">Website is Live!</h4>
                        <p class="metadata">Friday, 1/21/2011</p>

                        <p>
                            The new website for the Delta Beta Zeta Chapter 
                            of Lambda Chi Alpha is now live. Welcome!
                        </p>
                    </div>
                </div>

                <div class="clear"></div>
            </div>  



            <div id="footer">
            </div>
        </div>          
</body>

CSS：

#page-wrap{
    width:1040px;
    margin: 0 auto;
    background-image: url('../Images/content-background.jpg');
    background-repeat:repeat-y;
    }
    #main-content{
        padding-top:10x;
        padding-right:50px;
        padding-left:70px;
        }
        #announcements-area{
            background-image: url('../Images/announcements-content.jpg');
            background-repeat: repeat-y;
            float:left;
            }
            #announcements-content{
                padding-left:15px;
                padding-right:730px;
                padding-bottom:10px;
            }
        #welcome-area{
            background-image: url('../Images/welcome-content.jpg');
            background-repeat: repeat-y;
            float:right;
            }
            #welcome-content{

                padding-left:15px;
                padding-right:350px;
                padding-bottom:10px;
            }
#footer{
    min-height:185px;
    background-image: url('../Images/footer.jpg');  
    background-repeat:no-repeat;
}

以下是div现在的样子截图。他们在彼此之上。我希望它们彼此相邻。

Screenshot

Answer 1

尝试删除欢迎内容左侧的大填充和公告内容的右侧。这可能使它们比它们看起来更宽，并且它们不能在框架内并排放置。

查看此类内容的宝贵工具是firebug扩展和Web开发人员工具栏。安装了firebug后，您可以右键单击页面上的元素，单击“Inspect Element”，然后您可以将鼠标悬停在源中，并查看填充和边距对元素大小和位置的影响。

在ZAX，Bryan

Answer 2

试试这个：

<div id="container" style="width:100%;">
   <div id="left" style="width:50%;float:left;border:1px solid red;">asdfasdf</div>
   <div id="right" style="border:1px solid blue;">asdfasdf</div>
   <div style="clear:both;"></div>
</div>

我的边界仅用于说明目的。

Answer 3

使用以下更改编辑您的CSS：

#announcements-area{
    background-image: url('../Images/announcements-content.jpg');
    background-repeat: repeat-y;
    float:left;
    width:50%;
}

#announcements-content{
    padding:15px;
}

#welcome-area{
    background-image: url('../Images/welcome-content.jpg');
    background-repeat: repeat-y;
    float:right;
    width:50%;
}

#welcome-content{
    padding:15px;
}

Answer 4

您必须将父元素设置为position：relative才能定位子元素。此外，如果您希望它们彼此相邻（浮动），则必须为子元素赋予宽度。这是一个有效的代码：

    #page-wrap{
        width:1440px;
        margin: 0 auto;
        background-image: url('../Images/content-background.jpg');
        background-repeat:repeat-y;
        position:relative;
    }

    #main-content{
        padding-top:10x;
        padding-right:50px;
        padding-left:70px;
    }
    #announcements-area{
        background-image: url('../Images/announcements-content.jpg');
        background-repeat: repeat-y;
        float:left;
        position:relative;
        width: 500px;
    }
    #announcements-content{
        padding-left:15px;
        padding-right:30px;
        padding-bottom:10px;
    }
    #welcome-area{
        background-image: url('../Images/welcome-content.jpg');
        background-repeat: repeat-y;
        width: 500px;
        float:left;
        position:relative;
    }
    #welcome-content{
        padding-left:15px;
        padding-right:50px;
        padding-bottom:10px;
    }
    #footer{
        min-height:185px;
        background-image: url('../Images/footer.jpg');  
        background-repeat:no-repeat;
    }

Css - 对齐<div> s </div>

4 个答案: