简体   繁体   English

如何在Window中对齐DIV

[英]How to align DIV within Window

http://jsfiddle.net/ApS9L http://jsfiddle.net/ApS9L

I have this DIV which I am trying to align with the other two divs. 我有这个DIV,我试图与其他两个div对齐。 In the fiddle, you can see there is the border of 'our data center' and 'our other services', which align with each other in a 960 width frame (works great when resizing). 在小提琴中,您可以看到“我们的数据中心”和“我们的其他服务”的边界,它们在960宽度的框架中相互对齐(在调整大小时效果很好)。 However, I can't get the 'every account includes' to stay aligned with the two other sections below, and it stretches across, far beyond 960px. 但是,我不能让“每个帐户包含”与下面的其他两个部分保持一致,并且它延伸到远远超过960px。

Can you help me get the top div to align with the other two divs. 你能帮助我让顶级div与其他两个div对齐吗? Here is an image of live to show you my issues (there is a another column but it was breaking the fiddle). 这是一个现场图像,向您展示我的问题(还有另一个专栏,但它打破了小提琴)。 The colums are all grid_4 so grid_4*3 = 12, which shouldn't be causing issues.. colums都是grid_4所以grid_4 * 3 = 12,这不应该导致问题.. IMG

Here is FULL HTML, please look on fiddle for CSS 这是完整的HTML,请查看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-->

remove min-width from the below style 从下面的样式中删除min-width

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM