css3 - div中的div無法控制高度？我想控制右邊幾個(gè)藍(lán)色div的高度
問題描述
html:
<head>
<meta charset='utf-8'><meta name='viewport' content='width=device-width, initial-scale=1'><title>test</title><link rel='stylesheet' href='http://www.b3g6.com/wenda/order.css'>
</head>
<body>
<p class='nav'> <h1>Plateform</h1> <ul><li> <p>Order</p> <p id='selected'></p></li><li> <p>Menu</p></li><li> <p>Restuarant</p></li> </ul></p><p class='content'> <p id='left'><ul class='rtab'> <li><p>Manage order</p> </li> <li><p>Completed order</p> </li> <li><p>Closed order</p> </li></ul> </p> <p id='right'> <input type='text' ><button >Search</button> <p class='oders'> <ul class='ctab'><li>All</li><li>Accepted</li><li>Failed</li></ul> <p class='allorders'> <p class='order1'> <p class='title'>dsdsd</p> <p class='userinfo'>dsdsd</p> <p calss='lastt'>dsdsdsds</p>
</p> </p> </p> </p></p>
</body>
css:* {
font-family: Arial;margin: 0 0;
}
body {
background: #333333;
}
.html {
font-size: 6px;h1: 2rem;
}
.nav {
height: 3rem;background-color: #000000;padding-top: 1rem;
}
.nav>h1 {
color: #ffffff;margin-left: 3rem;display: inline-block;
}
.nav>ul {
position: absolute;top: 1.4rem;left: 20rem;display: flex;flex-flow: row-wrap;list-style: none;color: aliceblue;width: 50rem;flex-pack: justify;justify-content: space-around;
}
selected {position: relative;top: 0.3rem;background-color: #F5B23D;height: 0.5rem;
}
.nav>ul>li {
font-size: 1.5rem;width: 12rem;justify-content: space-around;text-align: center;
}
.nav>ul>li>p {
margin: auto;
}
.content {
display: flex;flex-direction: row;justify-content: space-between;width: auto;margin: 0;padding: 1rem;background-color: #333333;
}
.content p {
margin-top: 0.5rem;width: auto;height: 50rem;
}
left {background-color: #1F1F1F;margin-right: 1.5rem;margin-left: 1rem;
}
right {flex-grow: 16;
}
.rtab {
display: block;text-align: center;height: 30rem;width: 10rem;padding-top: 2rem;
}
.rtab>li {
line-height: 3rem;list-style: none;font-size: 1rem;font-weight: bolder;height: 3rem;width: 10.5rem;margin-left: -1.5rem;margin-bottom: 2rem;color: #acacac;
}.rtab>li:first-child {
background-color: #333333;color: #ffffff;
}
search{width: 36rem;height: 2.5rem;
}
search-button{width: 10rem;margin-left: 1rem;height: 2.5rem;background-color: #65b59a;color: aliceblue;}
.oders{
background-color: #333333;margin-top: 2rem;
}.ctab{
margin-top: 1.5rem;background-color: #000000;color: aliceblue;list-style: none;height: 3.5rem;margin-bottom: -0.5rem;
}.ctab>li{
display: inline-block;margin-right: 2rem;width: 8rem;text-align: center;font-weight: 800;height: 3rem;line-height: 3rem;
}.ctab>li:first-child{
border-bottom: 0.5rem solid;
}.allorders{
position: relative;background-color: #c1c1c1;padding-top: 0.5rem;height: 10px;width: 10px;
}
.order1{
background-color: aliceblue;height: 1px;margin: 1rem;margin-top: 1rem;}
.title{
height: 1rem;background-color: bisque;height: 1rem;
}
.userinfo{
height: 1rem;background-color: aqua;
}.lastt{
height: 1rem;background-color: #161617;
}
問題解答
回答1：你的高度是1px
回答2：在想要的p里面加上css內(nèi)聯(lián)樣式表就好了，比如
<p style='height:20px'>BlaBla</p>
百度一下css獲得更多
PS:這格式真難受= =||
相關(guān)文章：
1. 我在centos容器里安裝docker，也就是在容器里安裝容器，報(bào)錯(cuò)了？2. docker內(nèi)創(chuàng)建jenkins訪問另一個(gè)容器下的服務(wù)器問題3. 在windows下安裝docker Toolbox 啟動(dòng)Docker Quickstart Terminal 失敗！4. docker不顯示端口映射呢？5. docker-compose中volumes的問題6. golang - 用IDE看docker源碼時(shí)的小問題7. 關(guān)docker hub上有些鏡像的tag被標(biāo)記““This image has vulnerabilities””8. docker容器呢SSH為什么連不通呢？9. javascript - 連續(xù)點(diǎn)擊觸發(fā)mouseleave事件10. mac里的docker如何命令行開啟呢？
網(wǎng)公網(wǎng)安備