Question

嘿伙计们，我有一个有趣的设置正在进行中。我正在为现有网站创建一些移动支持。基本上当窗口达到一定大小或者在电话上打开页面时，我希望标题能够做出不同的事情。这部分很容易，我遇到的唯一一件就是这个。

我标题的基本结构是

[标志] [用户东西] [右侧] [1] [2] [3] [/右侧]

这些元素在我的标题中都很好。我的问题是在移动设备中我需要从右侧包含div内部的一个元素浮动到标题下面。所以我要么它需要弹出它的容器外面，或者我需要它的容器来占用屏幕的宽度。这个想法是它最终看起来像这样。

[标志] [用户东西] [右侧] [1] [2] [/右侧]
[3]

任何想法如何做到这一点？如果我必须使用一些Javascript来实现这一点很好，但根据我的老板指令，标记需要最小化。只是有点困难的方向。

当前的HTML

<div id="header">
  <div id="logo"></div>
  <div id="user-stuff"></div>

  <div id="right-side">
    <div id="1" class="right-side-section"></div>
    <div id="2" class="right-side-section"></div>
    <div id="3" class="right-side-section"></div>
  </div>
</div>

当前的css

#header {
  height: 48px;
  width: 100%;
}

#logo {
  display: inline-block;
  vertical-align: top;
}

#user-stuff {
  display: inline-block;
  vertical-align: top;
}

#right-side {
  display: block;
  float: right;
}

.right-side-section {
  display: inline-block;
  vertical-align: top;
}

当然，这只是一些模拟代码，可以让您了解我正在使用的结构以及所有内容的布局。我只需要想办法让div＃3在所有东西下面掉落，并在屏幕达到一定大小时占据屏幕的宽度。不知道怎么让它打破它的流动。

Answer 1

由于标题具有定义的高度，因此这将很容易。只需添加position: relative，就可以将子元素相对于自身绝对定位。

然后，您可以将div#3的css设置为使用绝对定位，如下例所示。

#header {
  height: 48px;
  width: 100%;
  position: relative;
}

#3 {
    position: absolute;
    top: 48px;
    left: 0;
    width: 100%;
    text-align: center;
}

在此处查看工作演示：http://jsfiddle.net/Cce9n/

请注意，分配以数字开头的ID无效。

Answer 2

您可以使用Javascript编辑其他div定义

E.G。更改文本对齐样式

document.getElementById("right-side").style.text-align = "center";

是否可以使用CSS将元素定位在其容器的边界之外？

2 个答案: