代码之家 › 专栏 › 技术社区 › Paul Wicks asgeo1

如何使用CSS使DIV扩展到页面宽度?

layout css

3

Paul Wicks asgeo1 · 技术社区 · 16 年前

我有一个有两个沙发的页面,有点像这样:

<div id="div_one">blah blah blah</div>
<div id="div_two">blah blah blah</div>

我希望它们水平居中,一个接一个,第二个扩展到页面宽度。

4 回复 | 直到 15 年前

1

3

maksim Tiago 15 年前

.first_one
{
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.second_one
{
  width: 100%;
}

那么在你看来,对于第一个你会做的

<div class = "first_one">
...
</div>

第二,你会的

<div class = "first_one second_one">
...
</div>

2

0

Nick 16 年前

请记住,元素有默认的页边距,所以即使它是100%,也可能有一些空白。如果需要,可以使用一些CSS将页边距重置为0。

3

0

womp 16 年前

默认情况下,DIV是其容器的整个宽度。

要使内容水平居中,请设置“ text-align: center; “在他们身上。如果它们在容器中,也应使用“ margin: auto 在容器上,它将设置左边距和右边距以自动使分区居中。

4

0

Kappers 16 年前

body{ text-align: center; }

.first_one
{
  width: 600px; /* Can be any width */
  margin:0 auto;
}

/* Reset text-align for child content */
.first_one, .second_one{text-align: left}

为了使IE6中的“第一个”居中,您需要在父元素上设置“text-align:center”。在本例中,我假设这是主体节点。另外,除非指定宽度,否则Margin:0 Auto不起作用。

然后,您需要在子分隔符上设置文本左对齐,这样子分隔符中的内容就不会居中。

您不需要在“第二个”上指定宽度,因为块元素会自然扩展以填充其父容器。此外,如果不设置宽度,浏览器将考虑任何填充、边距和边框,您可以应用到“第二个”而不破坏布局。