CSSの整列とサイズ

Question

私はレイアウトを設計していますし、私は2つの困難が午前：

1）ドン」トンを理解なぜカレンダー（緑）であるdiv要素の高さは、その親と異なっています。

2）div内にulを置き、背景色 '＃d1d2e0'を全幅に設定します。それは「リンク4」に行くだけです。

div.container 
 
{ 
 
width:100%; 
 
margin:0px; 
 
background: #005884; 
 
} 
 

 
div.left 
 
{ 
 
float:left; 
 
width:160px; 
 
margin:0; 
 
padding:1em; 
 
color: #d1d2e0; 
 
background: green; 
 
} 
 

 
h3.header 
 
{ 
 
padding:0; 
 
margin:0; 
 
} 
 

 
div.right 
 
{ 
 
margin-left:190px; 
 
padding:1em; 
 
text-align: right; 
 
} 
 

 
label.year{ 
 
\t padding: 0.4em 0.6em; 
 
    margin: 0; 
 
\t background: #d1d2e0; 
 
\t color: #36384e; 
 
    border-bottom: 1px solid #d1d2e0; 
 
} 
 

 
select#DropYear{ 
 
\t background: #36384e; 
 
\t color: #d1d2e0; 
 
\t width: 70px; 
 
\t height: 30px; 
 
\t margin: 0; 
 
\t font-size: 16px; 
 
\t text-align: center; 
 
\t text-align-last: center; 
 
} 
 

 
div.nav{ 
 
    width: 100%; 
 
    height: 30px; 
 
\t color: 5px soldi red; 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
} 
 

 
ul { 
 
    float: left; 
 
    width: 100%; 
 
    padding: 0; 
 
    margin: 0; 
 
    list-style-type: none; 
 
} 
 

 
a { 
 
    float: left; 
 
    width: 6em; 
 
    text-decoration: none; 
 
    color: #005884; 
 
    background-color: #d1d2e0; 
 
    padding: 0.2em 0.6em; 
 
    border-right: 1px solid white; 
 
} 
 

 
a.last { border-right: none; } 
 

 
li.nav { 
 
\t display: inline; 
 
    text-align: center; 
 
} 
 

 
.form{ 
 
\t width: auto; 
 
    height: 60px; 
 
\t background: lightgrey; 
 
} 
 

 
select.form{ 
 
} 
 

 
.content{ 
 
\t margin: 5px 0px; 
 
\t width: auto; 
 
    height: 150px; 
 
\t background: yellow; 
 
} 
 

 
.footer{ 
 
\t width: auto; 
 
    height: 20px; 
 
\t background: grey; 
 
}

<div class="container"> 
 
    <div class="left"><h3 class="header">Calendar</h3></div> 
 
    <div class="right"> 
 
    <label class="year" for="DropYear">Year</label><!-- 
 
    --><select id="DropYear" class="drop"> 
 
     <option value="2016">2016</option> 
 
     <option value="2017">2017</option> 
 
     <option value="2018">2018</option> 
 
    </select> 
 
    </div> 
 
</div> 
 
<div class="nav"> 
 
    <ul> 
 
    <li class="nav"><a href="#">Link one</a></li> 
 
    <li class="nav"><a href="#">Link two</a></li> 
 
    <li class="nav"><a href="#">Link three</a></li> 
 
    <li class="nav"><a href="#" class="last">Link four</a></li> 
 
    </ul> 
 
</div> 
 
<div class="form"></div> 
 
<div class="content"></div> 
 
<div class="footer"></div>

よろしく

、 エリオ・フェルナンデス

Answer 1

あなたは簡単にサイズにするために border-boxを使用する必要があります

：次に、あなたの.container高さを与える

* { 
    box-sizing: border-box; 
} 

を子供たちにそれを継承するよう伝えます。

次に、div.navにdisplay: table-cell;を取り除くと、実際にそれを背景色を与えます。私はあなたがどこにそれを設定しようとしているのかは分かりません。

background: #d1d2e0; 

また、このプロパティは意味をなさない：

color: 5px solid red; 

それはborder: 5px solid red;またはcolor: red;のいずれかでなければなりません。

* { 
 
    box-sizing: border-box; 
 
} 
 

 
div.container 
 
{ 
 
width:100%; 
 
margin:0px; 
 
background: #005884; 
 
height: 62px; 
 
} 
 

 
div.left 
 
{ 
 
float:left; 
 
width:160px; 
 
margin:0; 
 
/*padding:1em; don't need this */ 
 
color: #d1d2e0; 
 
background: green; 
 
height: 100%; 
 
} 
 

 
h3.header 
 
{ 
 
padding: 0 0 0 1em; 
 
margin:0; 
 
line-height: 62px; 
 
height: 62px; 
 
} 
 

 
div.right 
 
{ 
 
margin-left:190px; 
 
padding:1em; 
 
text-align: right; 
 
} 
 

 
label.year{ 
 
\t padding: 0.4em 0.6em; 
 
    margin: 0; 
 
\t background: #d1d2e0; 
 
\t color: #36384e; 
 
    border-bottom: 1px solid #d1d2e0; 
 
} 
 

 
select#DropYear{ 
 
\t background: #36384e; 
 
\t color: #d1d2e0; 
 
\t width: 70px; 
 
\t height: 30px; 
 
\t margin: 0; 
 
\t font-size: 16px; 
 
\t text-align: center; 
 
\t text-align-last: center; 
 
} 
 

 
div.nav{ 
 
    width: 100%; 
 
    height: 30px; 
 
\t /*color: 5px solid red; was this supposed to be "border" ? */ 
 
    /*display: table-cell; don't need this */ 
 
    vertical-align: middle; 
 
    background: #d1d2e0; /* you weren't setting this */ 
 
} 
 

 
ul { 
 
    float: left; 
 
    width: 100%; 
 
    padding: 0; 
 
    margin: 0; 
 
    list-style-type: none; 
 
} 
 

 
a { 
 
    float: left; 
 
    width: 6em; 
 
    text-decoration: none; 
 
    color: #005884; 
 
    background-color: #d1d2e0; 
 
    padding: 0.2em 0.6em; 
 
    border-right: 1px solid white; 
 
} 
 

 
a.last { border-right: none; } 
 

 
li.nav { 
 
\t display: inline; 
 
    text-align: center; 
 
} 
 

 
.form{ 
 
\t width: auto; 
 
    height: 60px; 
 
\t background: lightgrey; 
 
} 
 

 
select.form{ 
 
} 
 

 
.content{ 
 
\t margin: 5px 0px; 
 
\t width: auto; 
 
    height: 150px; 
 
\t background: yellow; 
 
} 
 

 
.footer{ 
 
\t width: auto; 
 
    height: 20px; 
 
\t background: grey; 
 
}

<div class="container"> 
 
    <div class="left"><h3 class="header">Calendar</h3></div> 
 
    <div class="right"> 
 
    <label class="year" for="DropYear">Year</label><!-- 
 
    --><select id="DropYear" class="drop"> 
 
     <option value="2016">2016</option> 
 
     <option value="2017">2017</option> 
 
     <option value="2018">2018</option> 
 
    </select> 
 
    </div> 
 
</div> 
 
<div class="nav"> 
 
    <ul> 
 
    <li class="nav"><a href="#">Link one</a></li> 
 
    <li class="nav"><a href="#">Link two</a></li> 
 
    <li class="nav"><a href="#">Link three</a></li> 
 
    <li class="nav"><a href="#" class="last">Link four</a></li> 
 
    </ul> 
 
</div> 
 
<div class="form"></div> 
 
<div class="content"></div> 
 
<div class="footer"></div>

Answer 2

変更し、あなたのdiv.rightpadding:1rempadding: 12pxにし、あなたの問題が修正されます。 1remのパディングはそれを展開するので、左の部分よりも大きくなります。それとも、あなたが唯一に12ピクセル四方を1rem得るが、padding: 1rem 1rem 12px 1rem;を使用することができます下

Answer 3

あなたは、左コンテナに右のコンテナを移動してからちょうどいくつかのパディングを変更することができます（たとえば、H3および.LEFTからドロップするようにパディングを追加します）。この場合、小さい方の容器は、すべての内容に収まるように成長します。

<div class="container"> 
    <div class="left"><h3 class="header">Calendar</h3> 
    <div class="right"> 
    <label class="year" for="DropYear">Year</label><!-- 
    --><select id="DropYear" class="drop"> 
     <option value="2016">2016</option> 
     <option value="2017">2017</option> 
     <option value="2018">2018</option> 
    </select> 
    </div> 
    </div> 
</div> 

リンクについては、すべて左に浮かして、幅を25％に設定してください。あなたはまた、ディスプレイを失う必要があります：含まれている部門のテーブルセル