是否可以使用CSS將元素放置在其容器的邊界之外？

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定義，

EG更改文本對齊樣式

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