如何在响应页面上以百分比宽度居中div？
[英]How center div with percentage width on responsive page?
问题描述
I have a responsive page which can be resized to fit a desktop, tablet or phone. 
我有一个响应页面，可以对其进行调整以适合台式机，平板电脑或手机。 The phone and tablet css is ok but I have problem with the desktop. 手机和平板电脑的CSS没问题，但是我的台式机有问题。 The difference is the main div which holds all the content. 区别在于保存所有内容的主div。
For the phone and tablet, the main div width is 100% of the screen but for the desktop it should be fixed at 900px and also centered on the screen. 对于手机和平板电脑，主div宽度为屏幕的100％，但对于台式机，其宽度应固定为900px，并且也应位于屏幕中央。
When I have it centered, the main div won't adjust its height depending on the content in it but it will for the other screen sizes. 当我将其居中时，主div不会根据其中的内容来调整其高度，但会针对其他屏幕尺寸进行调整。 When I add a float: left; 当我添加一个浮点数时： to the main div, it floats to the right and then the height follows the content in it 到主div，它会浮动到右侧，然后高度跟随其中的内容
It's probably a really simple fix but I have tried everything I know and googled without finding the solution. 这可能是一个非常简单的修复程序，但是我尝试了所有我知道的事情并在没有找到解决方案的情况下用Google搜索。
Thanks guys! 多谢你们！
body { background-color: #f1f1f1; margin: 0; } #main { background-color: #0000ff; color: #222222; float: left; height: auto; width: 100%; } /* Home Big /*************************/ #home-big { height: auto; width: 100%; } #home-big h1 { background-color: #1eaccc; color: #ffffff; margin: 0; padding: 7px; } /* Home Big Content /*************************/ .home-big-content { float: left; height: auto; margin-top: 10px; width: 100%; } /* Home Big Left /*************************/ .home-big-left { background-color: #ffff00; float: left; height: auto; width: 50%; } .home-big-left img { height: auto; width: 100%; } /* Home Big Right /*************************/ .home-big-right { float: left; height: auto; margin-left: 0; width: 50%; } /* TABLET SIZE /*****************************************************************************/ @media all and (min-width: 600px) { #main { background-color: #00ff00; float: left; height: initial; padding: 10px 0; } #home-big { margin: 0 10px; width: initial; } .home-big-left { background-color: #ffff00; } } /* DESKTOP SIZE /*****************************************************************************/ @media all and (min-width: 900px) { #main { background-color: #ff0000; float: initial; margin: 0 auto; width: 900px; } #home-big { margin: 0; width: initial; } .home-big-left { background-color: #ffff00; } }
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <link rel="stylesheet" href="stylesheet.css" type="text/css"> </head> <body> <section id="main"> <article id="home-big"> <h1>Headline</h1> <div class="home-big-content"> <div class="home-big-left"> Left </div> <div class="home-big-right"> Right </div> </div> </article> </section> </body> </html>
2 个解决方案
解决方案1
2 已采纳 2015-08-12 15:02:43
When you float stuff, you have to clear it or use overflow: hidden 当您漂浮东西时，必须清除它或使用overflow: hidden
Try: 尝试：
.clearfix:after {
content: "";
display: table;
clear: both;
}
Apply clearfix class to all containers that contain floated elements, or use overflow: hidden; 将clearfix类应用于所有包含浮动元素的容器，或使用overflow: hidden;
解决方案2
0 2015-08-12 15:01:19
You need to clear the floats that are with your #main element. 您需要清除#main元素中的浮点数。 I use the micro clearfix . 我使用micro clearfix 。
Use as follows: 用法如下：
<section id="main" class="cf"></section>
.cf:before,
.cf:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.cf:after {
clear: both;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.