我怎样才能让这两个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彼此垂直显示？

回答

相关问题