如何將div放在容器的上方？

我正試圖把四個元素放在一個容器div內;我有div 2和div 3的問題，我不能把它們放在彼此之上！那麼在這種情況下怎麼把2個div放在一個容器裏面呢？如何將div放在容器的上方？

HTML：

<div class = "Container"> 
    <div class = "Div1" > </div> 
    <div class = "Div_Mid!!" > </div>  
    <div class = "Div4" > </div> 
</div>

CSS：

.Container {height: 15px;width: 50%;float: left;} 

    .Div1 {height: 15px;width: 20%;float: right;} 

    .Div4 {height: 15px;width: 20%;float: left;} 

    .Div2 {height: 15px;width: 20%;float: ??????????}

來源

2017-08-26 Dreamer64

您能分享您的HTML和CSS的相關部分嗎？這樣我們可以給出具體的建議而不是通用的。 –

請檢查這一基本佈局，並插入你的HTML進去。我已經爲所有div的邊框添加了div尺寸的可見性，請忽略它。

div{ 
 
    border:1px solid black; 
 
} 
 
.container{ 
 
    display: -webkit-box; 
 
    display: -webkit-flex; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
} 
 
.left{ 
 
    width:33.33333333333333%; 
 
    float: left; 
 
} 
 
.center{ 
 
    width:33.33333333333333%; 
 
    float:left; 
 
} 
 
.right{ 
 
    width:33.33333333333333%; 
 
    float:left; 
 
}

<div class="container"> 
 
    <div class="left"> 
 
    left div 
 
    </div> 
 
    <div class="center"> 
 
    <div>top div</div> 
 
    <div>bottom div</div> 
 
    </div> 
 
    <div class="right"> 
 
    right 
 
    </div> 
 
</div>

來源

2017-08-26 19:30:32

我是當我建立我自己的CSS庫這種特殊情況下跳水，基本上這就是我想出了CSS/HTML僞代碼：

Div 0 | position relative 
    Div 4 | float left 
    /Div 4 

    Div 2 | position relative 
    /Div 2 

    Div 3 
    /Div 3 

    Div 1 | position absolute; top 0; right 0 
    /Div 1 
/Div 0

（你可能需要指定所有div爲box-sizing: border-box，但我不認爲這是必要的）

下面是一個片段演示這個。

body{ 
 
    width: 100vw; 
 
    height: 100vh; 
 
    
 
    position: relative; 
 
    display: block; 
 
    
 
    overflow: hidden; 
 
    overflow-y: auto; 
 
} 
 

 
slot{ 
 
    color: #e9ebee; 
 
    text-align: center; 
 
} 
 

 
[class*="w"], 
 
[class*="h"], 
 
[class*="mw"], 
 
[class*="mh"]{ 
 
    display: block; 
 
    box-sizing: border-box; 
 
    
 
    word-wrap: break-word; 
 
    overflow: auto; 
 
    
 
    float: left; 
 
} 
 

 
.fl{ float: left; } 
 

 
.rel{ position: relative; } 
 
[class*="abs-"]{ position: absolute; } 
 
.abs-t{ top: 0px; } 
 
.abs-r{ right: 0px; } 
 

 
.h12, .mh12{ height: 100vh; } 
 
.h2, .mh2{ height: calc(2 * (100vh/12)); } 
 
.h8, .mh8{ height: calc(8 * (100vh/12)); } 
 

 
.w1{ width: calc(100vw/12); } 
 
.w1{ width: calc(10 * (100vw/12)); } 
 
.mw2{ width: calc(2 * (100vw/12)); } 
 
.mw8{ width: calc(8 * (100vw/12)); }

<body> 
 
    
 
<slot class="h12 w1 mw2 mh12 fl" style="background: #ff0000;">div 4</slot> 
 
<slot class="h2 w10 mw8 mh2 rel" style="background: #00ff00;">div 2</slot> 
 
<slot class="h2 w10 mw8 mh2" style="background: #ff00ff;">div 3</slot> 
 
<slot class="h8 w10 mw8 mh8" style="background: #ffff00;"></slot> 
 
<slot class="h12 w1 mw2 mh12 abs-r abs-t" style="background: #0000ff;">div 1</slot> 
 

 
</body>

來源

2017-08-26 19:35:42 Vivick

這可以通過彎曲的中心DIV來實現，用3個div的左，右與flex-direction: column讓孩子的div上互相疊加：

例如：

div { 
 
    border: 3px solid black; 
 
    font-family: sans-serif; 
 
    text-align: center; 
 
    color: red; 
 
    margin: 10px; 
 
} 
 

 
.container { 
 
    display: flex; 
 
} 
 

 
.left { 
 
    flex: 1 
 
} 
 

 
.center { 
 
    flex: 2; 
 
    margin: 0; 
 
    border: none; 
 
    flex-direction: column; 
 
} 
 

 
.right { 
 
    flex: 1 
 
}

<div class="container"> 
 
    <div class="left"> 
 
    Div 4 
 
    </div> 
 
    <div class="center"> 
 
    <div>Div 2</div> 
 
    <div>Div 3</div> 
 
    </div> 
 
    <div class="right"> 
 
    Div 1 
 
    </div> 
 
</div> 
 
<div> 
 
    Div 0 
 
</div>

希望這有助於！

來源

2017-08-26 19:50:04

如何將div放在容器的上方？

回答

相關問題