保持网站大小不变

Question

嘿伙计们，我在网站上保持一致性方面遇到了麻烦。以下是网站应该是什么样子的示例：

现在，这里是未对齐的地方..当我将窗口调整为较小时，文本会像这样移位：

目前这些是应用于我的标签的css属性，该标签位于文本上。

#header_title_container {
width: 1000px;
margin: 0px auto;
padding-left: 85px;
padding-top: 50px;
}

#header_title {
font-size: 33px;
color: #FFFFFF;
font-weight: bold;
}

在最黑暗的灰色方框的角落处，总是将“标题”对齐的正确方法是什么？

感谢。

Answer 1

因为你的标题容器里面有填充，所以文本“Title”与屏幕边缘保持至少85px。因为它是左对齐的，这意味着它的左边缘始终为85px。

因此，当您的侧边栏小于85px时，文本无法与其对齐。

您可以通过修复侧边栏的大小来解决这个问题，方法是删除padding-left指令并将其替换为侧边栏大小的元素（或者用与侧边栏宽度相同的元素替换它），或者通过在侧栏上设置最小宽度。

Answer 2

这是你追求的结果吗？

http://jsfiddle.net/2ScZZ/5/

HTML 的

<div id="container">

  <div id="header_title_container">   
    <div id="sub_header_title_container">
      <div id="header_title">
        Title
      </div>    
    </div>
  </div>

  <div id="middlebit">      
  </div>  
</div> 

的CSS

#container {
background-color: lightgray;  
}

  #header_title_container {
  width: 100%;
  background-color: black;
  }

    #sub_header_title_container {
    width: 900px;
    margin: auto;
    padding-right: 20px;   
    }

      #header_title {
      font: 33px verdana;
      color: white;
      padding: 50px 0 10px 0;
      }

  #middlebit {
  margin: 0px auto;
  width: 900px;
  height: 100px;
  background-color: gray;
  }