2

首先，请原谅我缺乏关于 CSS 和 HTML 的知识。我对此很陌生。

我在这里阅读了有关将两个 div 并排对齐的大部分问题，我还阅读了一些教程。但由于某种原因，我的代码中的 div 长度有问题。

这是测试站点的 URL，让你们了解它的外观。

这是HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
    <title>Okamainakute ne~</title>  
    <link href="acver3style.css" rel="stylesheet" type="text/css" /> 
</head>  

<body>  

    <div id="main_wrapper">  

        <div id="banner_area">

                    <div id="logo">
                        <a href="http://www.abyssalchronicles.com"><img src="images/acver3_sitelogo.png" alt="" /></a>
                    </div>

                    <div id="xillia">
                        <img src="images/acver3_toxlogo.png" /><br />
                            <div class="xilliacountry"><img src="images/acver3_toxus.png" /><br /></div>
                                <div class="xilliashops"><a href="" target="_blank"><img src="images/gamestop.png" alt="" /></a> <a href="" target="_blank"><img src="images/playasia.png" alt="" /></a>  <a href="" target="_blank"><img src="images/amazon.png" alt="" /></a><br /></div>
                            <div class="xilliacountry"><img src="images/acver3_toxeu.png" /><br /></div>
                                <div class="xilliashops"><a href="" target="_blank"><img src="images/zavvi.png" alt="" /></a> <a href="" target="_blank"><img src="images/shopto.png" alt="" /></a>  <a href="" target="_blank"><img src="images/playasia.png" alt="" /></a><br /></div>
                    </div>

        </div>

        <div id="maincontent">

            <div class="menu_area">
                <ul>
                    <li><a href="http://www.abyssalchronicles.com">HOME/NEWS</a></a></li>
                    <li><a href="http://www.abyssalchronicles.com/tales-of">TALES OF... »</a>
                            <ul>
                                    <li><a href="http://www.abyssalchronicles.com/tales-of/type">By Type</a></li>
                                    <li><a href="http://www.abyssalchronicles.com/tales-of/platform">By Platform</a></li>
                            </ul>
                    </li>
                    <li><a href="http://www.abyssalchronicles.com/features">FEATURES »</a>
                            <ul>
                                    <li><a href="http://www.abyssalchronicles.com/features/media">Media</a></li>
                                    <li><a href="http://www.abyssalchronicles.com/features/columns">Columns</a></li>
                                    <li><a href="http://www.abyssalchronicles.com/features/reviews">Reviews</a></li>
                                    <li><a href="http://www.abyssalchronicles.com/features/fanworks">Fan Works</a></li>
                            </ul>
                    </li>
                    <li><a href="http://gallery.abyssalchronicles.com" target="_blank">GALLERY</a></li>
                    <li><a href="http://forums.abyssalchronicles.com" target="_blank">FORUMS</a></li>
                    <li><a href="http://www.abyssalchronicles.com/the-site">THE SITE »</a>
                            <ul>
                                    <li><a href="http://wwww.abyssalchronicles.com/the-site/ACs-history">AC's History</a></li>
                                    <li><a href="http://www.abyssalchronicles.com/the-site/staff">Site Staff</a></li>
                                    <li><a href="http://www.abyssalchronicles.com/the-site/affiliates">Affiliation</a></li>
                                    <li><a href="http://www.abyssalchronicles.com/the-site/contact-form">Contact Us</a></li>
                            </ul>
                    </li>
                </ul>


                <div id="socialgels">
                    &nbsp<a href="" target="_blank"><img src="images/fbgel.png" alt="" /></a> <a href="" target="_blank"><img src="images/twgel.png" alt="" /></a> <a href="" target="_blank"><img src="images/tmgel.png" /></a> <a href="" target="_blank"><img src="images/ytgel.png" alt="" /></a> <a href="" target="_blank"><img src="images/rsgel.png" alt="" /></a>
                </div>
            </div>

                <div id="highlights">
                    <img src="images/sample_highlightsfader.jpg" alt="" />
                </div>

                <div id="ads">
                    <img src="images/sample_ad.jpg" alt="" />
                </div>





        </div>  

    </div>  


</body>  
</html>

以及为此的CSS：

body {
    margin:0; padding:0;
    background:#0e564b url('images/ver3_banner.jpg') no-repeat center top;
}

a img {
    border:0;
}

img {
    border:0;
    margin:0;
}

#main_wrapper {
    width:983px;
    padding:0;
    border:0;
    margin:0 auto;
    top:0;
}

#logo {
    width:750px;
    padding:0;
    border:0;
    margin:0;
    display:-moz-inline-stack;
    display:inline-block;
    vertical-align:top;
    zoom:1;
    *display:inline;
}

#xillia {
    width:222px;
    padding:0;
    border:0;
    margin:0;
    display:-moz-inline-stack;
    display:inline-block;
    vertical-align:top;
    zoom:1;
    *display:inline;
}

#socialgels {
    width:255px;
    padding: 3px 5px 3px 2px;
    border:0;
    margin:0;
    text-align: right;
    display:-moz-inline-stack;
    display:inline-block;
    vertical-align:top;
    zoom:1;
    *display:inline;
}

#maincontent {
    box-shadow: 0 4px 5px 3px #062521;
    width:983px;
    background-color: #f0f8ff;
    float:left;
}

#highlights{
    padding: 10px 0px 10px 17px;
    border:0;
    margin:0;
    background: url('images/highlights_bg.gif') #f0f8ff no-repeat top left;
    vertical-align:top;
    float:left;
}

#ads {
    padding:10px 17px 10px 0px;
    border:0;
    margin:0;
    background: url('images/ads_bg.gif') #f0f8ff no-repeat top right;
    float:right;
    position: relative;
    z-index:1;
}

.xilliacountry {
    text-indent:40px;
    border: 0;
    margin: 0;
    padding:0;
}

.xilliashops {
    text-indent:75px;
    border: 0;
    margin: 0;
    padding:0;
}

.menu_area {
    background: url('images/ver3_menubg.jpg') #ab528c no-repeat;
    height:42px;
    border-top:#6a6a6b solid 1px;
    border-bottom:6a6a6b solid 1px;
    font-family: Tahoma, Helvetica, Arial, Verdana, sans-serif;
    font-weight: bold;
    font-size: 15px;
    color: #fff;
    text-shadow: 2px 2px #660643;
    z-index:2;
    positon: absolute;
}

.menu_area ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    position: relative;
    display: inline-table;
}

.menu_area ul li:hover > ul {
    display:block;
}

.menu_area li {
    float: left;
}

.menu_area ul a {
    background-image: url('images/menu_bg_divider.jpg');
    background-repeat: no-repeat;
    background-position: right;
    padding: 11px 16px 11px 16px;
    display: block;
    color: #fff;
    text-decoration: none;
}

.menu_area ul li a:hover {
    color: #fff;
    background-color: #b95a94;
}

.menu_area ul ul {
    display: none;
    background: #bb5c96;
    background-image: none;
    border: 0;
    padding: 0;
    position: absolute;
    top: 100%;
    width: 152px;
    z-index:2;
}

.menu_area ul ul li {
        float: none; 
        border-top: 1px solid #e6b5d5;
        position: relative;
}

.menu_area ul ul li a {
            padding: 10px 15px 10px 15px;
            color: #fff;
            background: none;
}   

.menu_area ul ul li a:hover {
                background: #e385c1;
}

我试图对齐的两个 div 是亮点和广告div。它们包含在名为maincontent的包装 div 中，并且上述两个 div 位于另一个名为menu_area的 div 下方。我想我还应该注意，在 main_area div 中，还有一个用于您在右侧看到的社交按钮的 div，名为socialgels。

无论如何，正如您在演示页面中看到的那样，div 高亮和广告对齐没有问题，但那是因为我不得不减小赋予这些 div 的宽度。我希望网站的宽度严格只有 983 像素，因此为什么您在代码中看到的其他父 div（main_wrapper和banner_area div）设置为 983 像素。maincontent div 也设置在那里。因此，亮点div 应该设置为 662px，ads div 设置为 321 px，高光向左浮动，广告向右浮动。这样，它们等于 983px。但是，当我这样做时，由于某种原因，它们不会并排放置：广告 div 将始终将自己定位在突出显示 div 下方。或者有时（我真的不知道发生了什么），ads div 会将自己定位到最右边，就好像在 highlight 和 ads div 之间有这个不可见的空间，我只是不知道它来自哪里。当没有为两个 div 指定宽度时，它们会正确对齐（目前演示页面就是这样），但我不能那样做。

这是两个 div 都指定宽度时的页面外观。

抱歉，如果它很长。基本上，我真的需要将这些特定宽度设置为突出显示和广告 div，因为我不希望我将在它们下方添加即将发布的内容（实际的帖子，以及右侧导航的其余部分，等等） , 破坏布局。我真的需要它在那个特定的 983px 宽度。

先感谢您。

4

1 回答 1

1

问题是你忘记了填充。如果将高亮 div 的宽度设置为 662 像素，则必须添加 17 像素的内边距并最终得到 679 像素。

因此，要解决您的问题，有两种解决方案：

只需从您想要的宽度中减去填充和/或边距。

662 像素 - 17 像素 = 645 像素

321 像素 - 17 像素 = 304 像素

或者您box-sizing: border-box在突出显示和广告 div 上使用。如果现在将宽度设置为 662 像素，则填充在宽度之内。

于 2013-05-02T17:02:33.510 回答