Question

我有一个带有标题栏的布局，其宽度为100％，页脚宽度为100％，但内容居中且仅为800px宽。

我试图在窗口拉伸时使文本浮动对齐到内容区域，但无法找到最佳方法。

EXAMPLE

我已尝试在标题div中进行绝对定位和相对定位，但是当窗口拉伸时，我要么让文本1保持在同一位置，要么在文本1栏中完全左对齐。

提前致谢

Answer 1

您可以尝试this

您可以删除width: 100%作为其整数宽度的块元素。

使用width: 800px和margin: 0 auto在页眉和页脚中添加一个div 以内心为中心。

HTML

<div class="container">

<header> <div class="cnt">Header Text</div> </header>

    <div class="content">
        Div content......
    </div>

<footer><div class="cnt">Footer Text</div> </footer>

</div>

CSS

.container{

    height:100%;
}
   header,footer{

    height:50px;
    border:1px solid red;
}
.cnt,
  .content{
    width:800px;
    height:100%;
    border:1px solid blue;
    margin: 0 auto;
}

Answer 2

这是你所期待的：

HTML：

   <div class="container">

    <header> <div class="content">Header Text</div> </header>

    <div class="content">
        Container Text
    </div>

<footer> Footer Text </footer>

</div>

CSS：

      .container{
    width:100%;
    height:100%;
}
header,footer{
    width:100%;
    height:50px;
    border:1px solid red;
    margin:0;padding:0;
}

.content{
    width:100%;
    height:100%;
    border:1px solid blue;
    text-align:justify;
}

Fiddle Demo

Answer 3

<强> HTML：

<div class="container">

    <header> <div class="content">Header Text</div> </header>

    <div class="content">
        Container Text
    </div>

    <footer> <div class="content"> Footer Text</div> </footer>

</div>

<强> CSS：

.container{
    width:100%;
    height:100%;
}
header,footer{
    width:100%;
    height:50px;
    border:1px solid red;
    margin:0;padding:0;
}

.content{
    width:800px;
    height:100%;
    border:1px solid blue;
    text-align:justify;
}

文本栏中的文字绝对定位为100％

3 个答案: