Question

这是一个难以解释的问题，因此我会尝试为您设想。我想使用Bootstrap进行响应式设计。

我的问题是我想在浏览器的左边缘开始使用div。 我希望它的内容与主容器一致。

--------------------------------------------------------- | | | | |------------------------ | | | PAGE TITLE | | | |------------------------ | | | | | | | | | | | | MAIN CONTAINER | | | | | | | | | |

有关如何实现PAGE TITLE的定位的任何想法？

Answer 1

我不确定这是你想要的。：）

我使用了绝对定位并从主容器的右边缘固定了右边的位置，使页面标题从左边的内容边缘开始。

<强> CSS

html, body {height:100%}
#container {
  position:relative; /* note */
  width:600px;
  margin:0 auto;
  padding:80px 20px 0;
  background:#fff;
  min-height:100%;
  border:0 1px;
}
#title {
  position:absolute;
  width:1600px; /* should enough long to always reach left edge in any screen size */
  top:0;
  right:340px; /* note */
  padding:10px 0;
  font-size:2em;
  background:#000;
  color:#999;
}

#title div {
  float:right; /* note */
  width:300px; /* note */
  text-align:left;
}
#title div:after {
  clear:right
}

<强> HTML

<div id="container">
  <h1 id="title">
    <div>Page title</div>
  </h1>
  <p>Main content</p>
</div>

演示：http://jsbin.com/bideravu/1/edit

这只是一个例子，您可以更改任何值。

Answer 2

这个怎么样？你需要使用绝对定位。

http://codepen.io/Leth0_/pen/zhEtF

希望我能正确理解你。

<强> CSS

.main{
  position:relative;
}
.left{
    height:100vh;
  border:solid;
  background:#aa6600;
}
.middle{
    height:100vh;
  border:solid;
  background:#aa4422;
}
.right{
    height:100vh;
  border:solid;
  background:#aa6600;
}
.title{
    font-size:3em;
  position:absolute;
  display:block;
  top:50px;
  left:0px;
  z-index:1;
  background:red;
  border:solid;
  height:10vh;
}

<强> HTML

 <div class="main">
  <div class="col-xs-6 col-sm-offset-3 title">Title goes here!</div>
    <div class="left col-xs-3"></div>
  <div class="middle col-xs-6"></div>
  <div class="right col-xs-3"></div>
</div>

文本大小可能需要更改，我在1440 x 900上使用3em。理想情况下，你想使用〜6vmin，但在某些浏览器中并没有广泛支持。 http://caniuse.com/viewport-units

如果您不介意，可以将3em更改为6vmin

CSS：将div内容与底层容器对齐

2 个答案: