为什么内容不在百分比

的条款中心的宽度为什么内容不，当我在%方面提供宽度，而不是px为什么内容不在百分比

.content-container{ 
 
     width : 100%; 
 
     margin:0 auto; 
 
     padding: 80px 0 0 0; 
 
     position: relative; 
 
     display: block; 
 
    } 
 

 
    .content-container2{ 
 
     width : 100px; 
 
     margin:0 auto; 
 
     padding: 80px 0 0 0; 
 
     position: relative; 
 
     display: block; 
 
    }

<div class='content-container'> 
 
    <div style="float:left;">Hello there</div> 
 
</div> 
 

 
<div class='content-container2'> 
 
    <div style="float:left;">Hello there</div> 
 
</div>

中心我想内容以宽度= 100％为中心。提前致谢。

来源

2015-02-08 Ben Lind

100％宽元素填充的整个宽度所以集中这种元素的容器没有多大意义。你究竟想要达到什么样的效果？ – JJJ 2015-02-08 14:07:19

@Juhana，我正在尝试构建一个基于移动的web应用程序，我需要将宽度设置为100％。但是对于桌面来说，这是1000px的中心工作。 – 2015-02-08 14:08:54

您是否考虑过'max-width：1000px'而不是？ – JJJ 2015-02-08 14:09:15

您是否考虑过使用媒体查询？

看看CSS3 media queries。

他们正是你所需要的。您只需在每种媒体查询的情况下指定一些最大或最小屏幕尺寸。通过这种方式，您可以设计您的网站在移动设备，平板电脑，计算机等上的外观，而且它们不一定都是相同的！

使用媒体查询，您可以将移动设备的宽度设置为100％，并将宽度设置为50％并将其居中放置在台式计算机上。

在像电脑这样的大屏幕上看起来不错的东西不一定在移动设备上看起来不错，但使用媒体查询，您可以为两个设备设计不同的版本！

例如，你只适用于台式电脑使用min-width

@media screen and (min-width: 800px) { /*The following CSS runs only for displays with a width (in pixels) of more than 800px*/ 
    body { 
     background-color: lightblue; 
    } 
} 

@media screen and (max-width: 800px) { /*The following CSS runs only for displays with a width (in pixels) of less than 800px*/ 
    body { 
     background-color: yellow; 
    } 
}

这样执行一些CSS，你的网页看起来台式电脑不同，看起来在移动设备和平板电脑不同。

另外，请参阅this伟大的链接。

来源

2015-02-08 14:14:46 Data2000

添加一个新类到您的样式表，这个类分配给内容容器

.center { 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    margin-left: -25%; 
    margin-top: -25%; 
    transform: translate(-50%, -50%); 
    width: 40%; 
    height: 50%; 
} 

<div class='content-container center'> 
    <div style="float:left;">Hello there</div> 
</div> 

<div class='content-container2'> 
    <div style="float:left;">Hello there</div> 
</div>

这里是一个活生生的例子

FIDDLE

来源

2015-02-08 14:17:06 NMindz

为什么内容不在百分比

回答

相关问题