【问题标题】:Change div Position on page size change在页面大小更改时更改 div 位置
【发布时间】:2016-10-05 14:50:27
【问题描述】:

我想像这样使用引导程序创建一个 div 组。

 -------------------------------
|                               |
|   |first div |  |  main  |    |
|                 |  div   |    |
|   |second div|  |        |    |
|                               |
 -------------------------------

所以在较小的屏幕上它看起来像:

 ------------------
|                  |            
|   |first div |   | 
|                  |    
|   |   main   |   |      
|   |   div    |   |
|   |          |   |
|                  |
|   |second div|   |
|                  |
 ------------------

有可能吗?
如果是,请指导我。

【问题讨论】:

标签: html css twitter-bootstrap


【解决方案1】:

试试这个:

.col {
   float: left;
    margin: 20px;
    padding-bottom: 100px;
    margin-bottom: -100px;
}
.div-1{
    background: #ccc; 
}
.div-2{
    background: #ddd;
}
.div-3{
    background: #eee;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-md-3 col-xs-12 div-1 col">First Div</div>
    <div class="col-md-8 col-xs-12 div-2 col">Main Div</div>
    <div class="col-md-3 col-xs-12 div-3 col">Second Div</div>
  </div>
</div>

Check here for demo

【讨论】:

  • 看看有没有用
【解决方案2】:

据我了解,如果您想像这样改变方向,可以使用 JavaScript,但有点棘手。

所以如果我把它翻译成 Bootstrap,它看起来是这样的。

 -------------------------------
|                               |
|   |first div |  |  main  |    |
|                 |  div   |    |
|   |second div|  |        |    |
|                               |
 -------------------------------

<div class="container">
    <div class="row">
        <div class="col-lg-8 col-xs-12">
            <div class="row">
                <div class="col-xs-12">
                    first div
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12">
                    second div
                </div>
            </div>
        </div>
        <div class="col-lg-4 col-xs-12">
            main div
        </div>
    </div>
</div>

然后在移动端它会是这样的。

 ------------------
|                  |            
|   |first div |   | 
|                  | 
|   |second div|   |
|                  |
|   |   main   |   |      
|   |   div    |   |
|   |          |   |
|                  |
|                  |  
|                  |
 ------------------

Bootstrap 还提供 col-pullcol-push 但它仅适用于同一行中的项目,因此除非第一个 div 以某种方式与主 div 具有相同的高度并且我们可以将这两个组合成一行。

让我找到合适的解决方案并尽快回来:)

【讨论】:

    【解决方案3】:

    使用严格的仓位顺序,您需要使用 POSITION: ABSOLUTE 并定义 TOP LEFT WIDTH HEIGHT 属性。然后在 CSS 媒体查询中,根据您的需要重新定位 TOP LEFT WIDTH HEIGHT。

    【讨论】:

    • 如何创建第一个?我需要两个.col-md-3 向下。
    猜你喜欢
    • 1970-01-01
    • 2021-04-01
    • 1970-01-01
    • 2020-07-02
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多