CSS 정렬 및 크기

Question

나는 레이아웃을 설계, 그리고 난이 어려움을 겪고 : 달력 (녹색)에있는 DIV의 높이가, 부모와 다른 이유

1) 돈 't 이해를.

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 %로 설정하십시오. 또한 디스플레이를 잃을 필요가 있습니다. 포함 된 div의 테이블 셀