[英]How to align DIV within Window
我有這個DIV,我試圖與其他兩個div對齊。 在小提琴中,您可以看到“我們的數據中心”和“我們的其他服務”的邊界,它們在960寬度的框架中相互對齊(在調整大小時效果很好)。 但是,我不能讓“每個帳戶包含”與下面的其他兩個部分保持一致,並且它延伸到遠遠超過960px。
你能幫助我讓頂級div與其他兩個div對齊嗎? 這是一個現場圖像,向您展示我的問題(還有另一個專欄,但它打破了小提琴)。 colums都是grid_4所以grid_4 * 3 = 12,這不應該導致問題..
這是完整的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-->
從下面的樣式中刪除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.