html - 如何在 Window 中对齐 DIV

Question

http://jsfiddle.net/ApS9L

我有这个 DIV，我试图将其与其他两个 div 对齐。在 fiddle 中，您可以看到“我们的数据中心”和“我们的其他服务”的边框，它们在 960 宽的框架中相互对齐(调整大小时效果很好)。但是，我无法让“每个帐户包括”与下面的其他两个部分保持一致，并且它延伸到远远超过 960 像素。

你能帮我让顶部的 div 与其他两个 div 对齐吗？这是一张现场图片，向您展示我的问题(还有另一列，但它打破了 fiddle )。 colums 都是 grid_4 所以 grid_4*3 = 12，这不应该引起问题..

这是完整的 HTML，请在 fiddle 上寻找 CSS

<div id="hostingservices" class="grid_12">
            <div id="insidehostingservices" class="grid_12margin">
            <div class="constrain">
                <h1 class="bigtitle">Every Account Includes</h1>
                <div class="grid_4 alpha">

                    <h2>Email Features</h2>
                    <ul>
                        <li>UNLIMITED 1GB eMail Inboxes</li>
                        <li>POP3, IMAP & SMTP Access</li>
                        <li>Autoresponders & Mailing Lists</li>
                        <li>Email Forwarding, Catch All & Spam filtering</li>
                        <li>Junk Mail Filters</li> 
                     </ul>

                    <h2>Website Statistics</h2>
                    <ul>
                        <li>Error & Access/Referrer/Agent Logs</li>
                        <li>Website Statistics</li>
                        <li>Google Sitemaps Generator</li>
                        <li>Webalizer Graphical Statistics</li>
                        <li>AWStats Graphical Statistics</li>
                        <li>Advanced Graphical & Text Counters</li>
                        <li>Bandwidth Statistics</li>
                        <li>Tracewatch</li> 
                    </ul>

                    <h2>Access Features</h2>
                    <ul>
                        <li>Master & Additional FTP Accounts</li>
                        <li>SSH Access</li> 
                    </ul>

                    <h2>Databases</h2>
                    <ul>
                        <li>MySQL 5 Databases</li>
                        <li>MySQL Web GUI</li>
                    </ul>
                </div> <!-- end of insideourdataservices grid9 alpha-->

                <div class="grid_4">
                    <h2>Advanced Features</h2>
                        <ul>
                            <li>eXtend Based Control Panel</li>
                            <li>Sub Domains</li>
                            <li>Microsoft FrontPage Extensions</li>
                            <li>Online File Manager</li>
                            <li>Website Redirection</li>
                            <li>Website submission to Google</li>
                            <li>Advanced Website Password Protection</li>
                            <li>Scheduled Tasks</li>
                            <li>IP Adress Blocking</li>
                        </ul>

                    <h2>Programming</h2>
                        <ul>
                            <li>PHP 4, PHP5 with SOAP Support</li>
                            <li>Perl, Python, Miva, RealAudio</li>
                            <li>Sun ONE ASP (Chilisoft ASP)</li>
                            <li>Ruby, Rails, ImageMagick, Ghostscript</li>
                            <li>Zend Optimizer, GD</li>
                        </ul>

                    <h2>E-Commerce</h2>
                        <ul>
                            <li>Shared Secure Server Access (https)</li>
                            <li>osCommerce, Zen, CubeCart, Agora</li>
                            <li>Lots of Free Webtools inc Clipart</li>
                            <li>Google Adwords</li>
                        </ul>
                </div>

                <div class="grid_4 omega">
                    <h2>One Click Installations</h2>
                    <ul>

                        <li>Joomla 1.5</li>
                        <li>Wordpress Blog, Drupal</li>
                        <li>phpBB3 Discussion Forums</li>
                        <li>Elgg Social Networking System</li>
                        <li>CMS Made Simple, Guestbook, Geeklog</li>
                        <li>Nucleus Blog, Eblah Online Discussion</li>
                        <li>Typo3 CMS, Crafty syntax Live help</li>
                        <li>dot Project Management System</li>
                        <li>osTicket Ticeting helpdesk system</li>
                        <li>Form to Email with CAPTCHA</li>
                        <li>Custom 404 and 500 Error Pages</li>
                        <li>Online Auction (just like ebay!)</li>
                        <li>Online Photo Album</li>
                        <li>Web Calendar</li>
                        <li>Web Survey</li>
                        <li>Internet Countdown, Random Text Displayer</li>
                        <li>Random Images Displayer</li>
                        <li>Round Cube Webmail, MediaWiki</li>
                        <li> SugarCRM</li>
                        <li>Many Javascript Generators</li> 
                    </ul>

                </div>
                <a href="http://dchost.co.uk/basket" id="button3" class="ordernow">Order Now</a>
                </div>
            `</div> <!-- end of insideourdataservices grid12 margin-->
        </div> <!-- end of ourdataservicesimage grid3 omega-->

        <div class="clear"></div> <!-- clears ourdataservices grid12-->

Answer 1

从下面的样式中删除最小宽度

#hostingservices {
    height: 800px;
    /* min-width: 1500px; */
    background: #F2F7FA;
    border-style: solid;
    border-bottom-width: thin;
    border-color: #ccc;
}