0
나는 다음과 같은 CSS와 HTML 세트를 가지고 :40 % + 60 % 너비 설정에서 플로트 요소가 제대로 작동하지 않는 이유는 무엇입니까?
html, body{
margin: 0;
}
header{
border: 1px solid green;
background-color: green;
height: 50px;
}
nav{
border: 1px solid red;
background-color: red;
height: 50px;
}
aside{
border: 1px solid yellow;
background-color: yellow;
height: 50px;
width: 40%;
float: left;
}
section{
border: 1px solid blue;
background-color: blue;
height: 50px;
width: 60%;
float: right;
}<body>
<header>
</header>
<nav>
</nav>
<aside>
</aside>
<section>
</section>
</body>하지만 심지어 속성을 떠을 설정 한 후 내 <aside> 및 <section> 나란히되지 않는 방법으로 혼란 스러워요. 나는 <aside>을 width: 40%과 <section>에서 width: 60%으로 설정했습니다. 그들은 100%까지 합쳐져서 전체 웹 페이지를 수평으로 채우지 않아야합니까?
은 또한 어떤 패딩이나 마진을 추가하지 않았습니다. – 5120bee
두 가지 모두에'box-sizing : border-box; '를 적용 해보십시오. 테두리가 너비에 추가되므로 요소가 실제로 40 %와 60 %보다 2 배 큰 것을 기억하는 것이 중요합니다. 앞서 언급 한 속성은 패딩/테두리가 요소 너비에 영향을주지 않도록 제한합니다. – Santi
아, 경계 너비를 고려하지 않았습니다! 정말 고마워! – 5120bee