在1 Div內插入2個div（一個在左側，另一個在右側）

-1

我是CSS的noob，我在玩CSS和DIVS，一切都很順利，直到我決定把2個Div放入一。我可以把ONE div放在另一個裏面，但是當我把2放在另一個裏面的時候，它只是個bug。 I could put the green Div inside of yellow div but not the cyan 在1 Div內插入2個div（一個在左側，另一個在右側）

這裏是我的HTML：

<html> 
<head> 
    <link type="text/css" rel="stylesheet" href="style_divs.css"> 
</head> 
<body> 
<div id="table"> 
    <div id="year">2017</div> 
    <div id="month"> 
     <div id="previousMonth">Previous</div> 
     <div id="nextMonth">Next</div> 
     January 
    </div> 
</div> 
</body> 
</html>

CSS

#table{ 
    width:25%; 
    height:50%; 
    background-color: red; 
    margin: 0 auto; 
} 

#year{ 
    width:100%; 
    height:10%; 
    background-color: blue; 
    margin: 0 auto; 
    text-align: center; 
} 
#month{ 
    width:100%; 
    height:10%; 
    background-color: yellow; 
    margin: 0 auto; 
    text-align: center; 
} 

#previousMonth{ 
    width:12%; 
    height:100%; 
    background-color: green; 
    margin-left: 0%; 
    text-align: center; 
} 

#nextMonth{ 
    width:12%; 
    height:100%; 
    background-color: cyan; 
    margin-left: 88%; 
    text-align: center; 
}

感謝。

來源

2017-02-27 Lucas Gomes

你有沒有試過'浮動''divs'？ –

你真正的問題是什麼？ –

謝謝。我現在感覺非常愚蠢。 –

最好的方法是使用#previousmonth浮動：左和#nextMonth浮動：權

你不應該使用邊緣特徵來實現的下面是使用浮動命令

#previousMonth{ 
width:12%; 
float:left; 
height:100%; 
background-color: green; 
text-align: center; 
} 

#nextMonth{ 
width:12%; 
height:100%; 
float:right; 
background-color: cyan; 
text-align: center; 
}

校正的兩種風格

來源

2017-02-27 15:05:24

body{ 
 
height:500px; 
 
width:600px; 
 
} 
 
#table{ 
 
width:50%; 
 
height:70%; 
 
background-color: red; 
 
margin: 0 auto; 
 
} 
 

 
#year{ 
 
width:100%; 
 
height:10%; 
 
background-color: blue; 
 
margin: 0 auto; 
 
text-align: center; 
 

 
} 
 
#month{ 
 
width:100%; 
 
height:10%; 
 
background-color: yellow; 
 
margin: 0 auto; 
 
} 
 

 
/*wrapped them in div so they can be one group*/ 
 
#pager{ 
 
height:100%;/*tells the pager to take 100% of parent's height(month)*/ 
 
} 
 
#pager div{/*tells the child divs of pager to have same properties*/ 
 
display:inline-block;/*this will display contents side by side one another*/ 
 
width:12%; 
 
height:100%; 
 
} 
 

 
#previousMonth{ 
 
background-color: green;/*assign properties that are unique to the child*/ 
 
} 
 

 
#nextMonth{ 
 
background-color: cyan; 
 
float:right; /* this will make it float to right */ 
 
} 
 
#monthname{ 
 
text-align:center; 
 
}

<body> 
 
<div id="table"> 
 
    <div id="year">2017</div> 
 
    <div id="month"> 
 
     <div id="pager"> 
 
     <div id="previousMonth">Previous</div> 
 
     <div id="nextMonth">Next</div> 
 
     </div> 
 
     <div id="monthname">January<div/> 
 
    </div> 
 
    </div> 
 
</div> 
 
</body>

我已經修修補補你的代碼位。你需要告訴元素做什麼。此外，儘量不要爲孩子編寫相同的代碼，因爲他們會繼承父母的屬性。按F12會告訴你元素渲染時的屬性。希望這可以幫助。祝你好運，快樂的編碼。

來源

2017-02-27 15:33:11 jmag

在1 Div內插入2個div（一個在左側，另一個在右側）

回答

相關問題