保持孩子div內的父div

好吧，嗨，我覺得這是一個非常愚蠢的問題，我發現了很多像這樣的問題，但沒有一個答案似乎適用於我。保持孩子div內的父div

我的問題是有一個div（任務欄）和裏面的另一個div（任務欄欄），我希望任務欄留在任務欄內。我嘗試將位置放在絕對和相對位置上，它似乎根本不起作用，它總是位於任務欄div的下面。我可以把它推到頂端，但我不覺得現在是這樣。不過，我不知道，對於CSS和HTML，我確實很新，而且還在學習。

這裏是我的代碼的jsfiddle：https://jsfiddle.net/5zghzczs/3/

.taskbar { 
    width: 100%; 
    height: 40px; 
    box-shadow: 0px 1px 0px 0px #C2C5CA inset, 0px 2px 0px 0px #FFF inset; 
    background-color: #C2C5CA; 
    position: absolute; 
    left: 0; 
    bottom: 0; 
} 
#taskbar-start { 
    margin-top: 4px; 
    margin-bottom: 2px; 
    margin-left: 2px; 
    width: 90px; 
    height: 33px; 
    background-color: #C2C5CA; 
    cursor: pointer; 
} 
.taskbar-start-inactive { 
    box-shadow: -1px -1px 0px 0px #000 inset, 1px 1px 0px 0px #FFF inset, -2px -2px 0px 0px #868A8E inset; 
} 
.taskbar-start-active { 
    box-shadow: -1px -1px 0px 0px #FFF inset, 1px 1px 0px 0px #000 inset, 2px 2px 0px 0px #868A8E inset; 
} 
.taskbar-start-frame-active { 
    margin-top: 2px; 
    margin-left: 2px; 
    width: 84px; 
    height: 27px; 
    border-style: dotted; 
    border-width: 1px; 
    position: absolute; 
} 
.taskbar-start-logo { 
    margin-top: 6px; 
    margin-left: 3px; 
    width: auto; 
    height: 20px; 
    -webkit-user-select: none; 
} 
.taskbar-start-text { 
    margin-top: 10px; 
    margin-left: 5px; 
    display: inline; 
    font-size: 12px; 
    letter-spacing: -2px; 
    -webkit-user-select: none; 
    font-family: "Press Start 2P"; 
    position: absolute; 
} 
.taskbar-bar { 
    height: 35px; 
    width: 2px; 
    background: green; 
    margin-left: 100px; 
}

<div class="taskbar"> 
    <div id="taskbar-start" class="taskbar-start-inactive"> 
      <div id="taskbar-start-frame"> 
       <img class="taskbar-start-logo" src="img/logo.png" /> 
       <div class="taskbar-start-text">Start</div> 
      </div> 
     </div> 
    <div class="taskbar-bar"></div>

來源

2017-07-24 alex

你的問題是，您使用的利潤率左，這是試圖給保證金在一個股利和其他之間。 Here是一個新的JSFiddle，我將位置設置爲absolute，將margin-left更改爲left，並添加了top: 0px;以將其設置爲頂部（覆蓋另一個div）。

.taskbar-bar { 
    position: absolute; 
    top: 4px; 
    left: 100px; 
    height: 35px; 
    width: 2px; 
    background: green; 
}

來源

2017-07-24 19:01:47

它完美的工作！謝謝！ – alex

更改的taskbar-start 「顯示」和taskbar-bar爲「inline-block的」

.taskbar-start, .taskbar-start { 
    display: inline-block; 
}

來源

2017-07-24 18:59:19 sn3ll

我想做到這一點的最佳方法是使父級成爲flexbox容器。這將把所有的孩子放在一排。

display: flex;

見https://jsfiddle.net/5zghzczs/7/

瞭解更多關於Flexbox的位置：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

來源

2017-07-24 19:00:06

保持孩子div內的父div

回答

相關問題