我怎樣才能讓這兩個div彼此垂直顯示？

-2

有點新的web開發，所以忍受着我。正如您在Codepen中看到的，我製作了here，我正在開發一個原型消息客戶端。我希望「聊天名稱」和「預覽文本」可以在另一個下面，像圖片here那樣非常接近。我還想在按鈕的最後有另一個Div/Span，這個Div/Span也會有一些內部文字，就像它在「Now」中的圖片一樣。我怎樣才能讓這兩個div彼此垂直顯示？

這裏是我的CSS供參考，我怎樣才能得到兩個（三個真正的）div在正確的位置。

.nav-side-menu { 
    overflow: hidden; 
    font-size: 18px; 
    font-weight: 100; 
    border-right: 1px solid #484848; 
    background-color: #e6e6e6; 
    position: fixed; 
    top: 0px; 
    width: 20%; 
    height: 100%; 
    color: #484848; 
} 
.nav-side-menu .brand { 
    background-color: #e6e6e6; 
    line-height: 75px; 
    display: block; 
    text-align: center; 
    font-size: 32px; 
    border-bottom: 1px solid #484848; 
} 
.chat-header { 
    position: fixed; 
    left: 20%; 
    width: 80%; 
    background-color: #e6e6e6; 
    line-height: 75px; 
    display: block; 
    text-align: center; 
    font-size: 32px; 
    border-bottom: 1px solid #484848; 
} 

.nav-side-menu .toggle-btn { 
    display: none; 
} 

.nav-side-menu ul, 
.nav-side-menu li { 
    list-style: none; 
    padding: 0px; 
    margin: 0px; 
    line-height: 80px; 
    cursor: pointer; 
} 
.nav-side-menu ul :not(collapsed) .arrow:before, 
.nav-side-menu li :not(collapsed) .arrow:before { 
    /*font-family: FontAwesome;*/ 
    content: "\f078"; 
    display: inline-block; 
    padding-left: 10px; 
    padding-right: 10px; 
    vertical-align: middle; 
    float: right; 
} 
.nav-side-menu ul .active, 
.nav-side-menu li .active { 
    background-color: #3ab795; 
} 

.nav-side-menu li { 
    padding-left: 0px; 
    border-bottom: 1px solid #484848; 
    -webkit-transition: all 0.5s ease; 
    -moz-transition: all 0.5s ease; 
    -o-transition: all 0.5s ease; 
    -ms-transition: all 0.5s ease; 
    transition: all 0.5s ease; 
} 
.nav-side-menu li a { 
    padding-left: 20px; 
    padding-top: 29px; 
    padding-bottom: 29px; 
    padding-right: 100%; 
    text-decoration: none; 
    color: #484848; 
} 
.nav-side-menu li a i { 
    padding-left: 10px; 
    width: 20px; 
    padding-right: 20px; 
} 
.nav-side-menu li:hover { 
    background-color: #3ab795; 
    -webkit-transition: all 0.5s ease; 
    -moz-transition: all 0.5s ease; 
    -o-transition: all 0.5s ease; 
    -ms-transition: all 0.5s ease; 
    transition: all 0.5s ease; 
} 

#searchbox{ 
    width: 100%; 
    position: relative; 
    margin: 5px 0 5px 0; 
    padding: 3px 10px 3px 20px; 
    box-sizing: border-box; 
    border: 1px solid #484848; 
    border-radius: 20px; 
    background-color: #e6e6e6; 
} 

.search-menu{ 
    border-bottom: 1px solid #484848; 
    padding: 5px; 
} 

.chat-box{ 
    position: fixed; 
    bottom: 0; 
    width: 80%; 
    height: 60px; 
    left: 20%; 
    background-color: #e6e6e6; 
    border-top: 1px solid #484848; 
} 

#message-box{ 
    width: 95%; 
    position: relative; 
    margin: 15px 5px 5px 5px; 
    padding: 3px 10px 3px 20px; 
    border: 1px solid #484848; 
    border-radius: 20px; 
    background-color: #e6e6e6; 
} 

.send-message{ 
    background-color: #3ab795; 
    width: 3%; 
    height: 30px; 
    border-radius: 5px; 
    border: none; 
} 

.send-message:focus{ 
    outline: 0; 
} 

.send-message:active{ 
    background-color: #29a281; 
} 

.preview-text{ 
    font-size: 11px; 
} 

@media (max-width: 767px) { 
    .nav-side-menu { 
    position: relative; 
    width: 100%; 
    margin-bottom: 10px; 
    } 
    .nav-side-menu .toggle-btn { 
    display: block; 
    cursor: pointer; 
    position: absolute; 
    right: 20px; 
    top: 5px; 
    z-index: 10 !important; 
    padding: 3px; 
    background-color: #e6e6e6; 
    color: #484848; 
    width: 30px; 
    text-align: center; 
    } 
    .brand { 
    text-align: left !important; 
    font-size: 22px; 
    padding-left: 20px; 
    line-height: 50px !important; 
    } 
} 

@media (min-width: 767px) { 
    .nav-side-menu .menu-list .menu-content { 
    display: block; 
    } 
} 

body { 
    margin: 0px; 
    padding: 0px; 
    font-family: 'Roboto', sans-serif; 
} 

.nano { height: 85%; } 
.nano .nano-pane { background: #888; } 
.nano .nano-slider { background: #111; }

來源

2016-12-14 Conor Watson

哪裏是你的html？ –

@MandarSant哎呀抱歉忘了將它們添加到帖子。添加了一個Codepen和一個圖像。 –

http://codepen.io/djkantoci/pen/KNGYbv

變化line-height 1.5行高（或其他一些價值，但不使用像素）。添加一些padding-right到li（使時間空間文本），追加時間，並添加position: absolute到了那個時候DIV（不要忘了做相對li元素）

來源

2016-12-14 13:33:13 Kantoci

輝煌，謝謝！ –

調整你的nav-side-menu元素

.nav-side-menu ul, 
.nav-side-menu li { 
    list-style: none; 
    padding: 0px; 
    margin: 0px; 
    line-height: 30px; 
    cursor: pointer; 
}

來源

2016-12-14 12:56:10

你的代碼是非常正確的。由於線高，這個元素變得非常高。請看下面的代碼。

 
    .nav-side-menu ul, 
    .nav-side-menu li{ 
     line-height: normal; 
    } 
    .nav-side-menu li> div { 
     padding: 5px 12px; 
    }

來源

2016-12-14 13:56:38 ekta

我怎樣才能讓這兩個div彼此垂直顯示？

回答

相關問題