DIV 안에 CSS DIV

나는 HTML/CSS를 시작하고 있으며 나는 자신의 웹 사이트를 작성하려고합니다. 그러나 헤더, 기본 컨텐트 div 및 바닥 글이 필요합니다. 메인 콘텐츠 div 안에는 왼쪽 막대와 오른쪽 막대를 넣으려고하지만 불행히도 왼쪽 막대는 항상 div에서 빠져 있습니다 ... 내가 뭘 잘못하고 있니? 내가 잘못 뭐하는 거지DIV 안에 CSS DIV

body { 
 
    background-color: black; 
 
} 
 
p { 
 
    color: white; 
 
} 
 
#header { 
 
    background-color: grey; 
 
    margin-left: 100px; 
 
    margin-right: 100px; 
 
    border-radius: 5px; 
 
    text-align: centaer; 
 
    /*change later*/ 
 
} 
 
#content { 
 
    background-color: green; 
 
    margin-top: 20px; 
 
    margin-bottom: 20px; 
 
    margin-left: 100px; 
 
    margin-right: 100px; 
 
    border-radius: 5px; 
 
    padding: 50px; 
 
} 
 
#leftBar { 
 
    background-color: orange; 
 
    left: 20px; 
 
    right: 20px; 
 
    top: 20px; 
 
    float: left; 
 
    color: white; 
 
    width: 20%; 
 
    height: 60%; 
 
    display: block; 
 
} 
 
#footer { 
 
    background-color: gray; 
 
    margin-bottom: 20px; 
 
    margin-top: 20px; 
 
    margin-right: 100px; 
 
    margin-left: 100px; 
 
    border-radius: 5px; 
 
    text-align: center; 
 
    /*change later*/ 
 
}

Here is my HTML 
 

 
<html> 
 

 
<head> 
 
    <title>Titel</title> 
 
    <link rel="stylesheet" type="text/css" href="FirstpageCSS/mainstyle.css" /> 
 
</head> 
 

 
<body> 
 
    <p>Formatierter Inhalt</p> 
 

 
    <div id="header">HEADER</div> 
 
    <div id="content">this is going to be the content 
 

 

 

 
    <p>lol</p> 
 
    </div> 
 

 
    <div id="leftBar">contentntntntntnntnt</div> 
 

 
    <div id="footer">FOOTER</div </body> 
 

 
</html>

: 여기

내 CSS입니까? 나는 포지셔닝에 관한 그 무언가를 안다. 그러나 나는 항상 그걸로 혼란스러워한다. ...

초보자로서의 도움 감사.

출처

2016-07-26 kendrickLamar

'# leftBar'는 HTML 코드의'# content' 밖에 있습니다. 또한 ['float'] (https://developer.mozilla.org/en-US/docs/Web/CSS/float)는 "정상 흐름에서 요소를 가져와야한다고 지정합니다"; [수레를 지울 필요가 있습니다] (https://developer.mozilla.org/en-US/docs/Web/CSS/clear). [어떤 방법으로 'clearfix'를 사용할 수 있습니까?] (http://stackoverflow.com/questions/211383/what-methods-of-clearfix-can-i-use) – showdev

내부의 leftbar의 사업부를 넣어보십시오. 당신이 leftBar DIV 내부 콘텐츠 사업부, 및 바닥 글 DIV의 가까운 태그를 배치 할 수 있습니다 우선 들어

<div id="header">HEADER</div> 
<div id="content">this is going to be the content 



<p>lol</p></div> 

    <div id="leftBar">contentntntntntnntnt</div> 

<div id="footer">FOOTER</div

(이러한 부트 스트랩 등) .

<div id="header">HEADER</div> <div id="content">this is going to be the content <p>lol</p> <div id="leftBar">contentntntntntnntnt</div> </div> <div id="footer">FOOTER</div>

그런 다음 div 콘텐츠의 높이를 leftBar div 높이와 같게 설정하십시오. 왼쪽 막대를 왼쪽으로 띄우면 내용 div와 왼쪽에 나타납니다. 바닥 글을 만들려면

당신이 이

.clear { clear:both; }

이 작동한다, CSS CSS 파일에

<div class="clear"></div>

빈 사업부를 확인하고 사용하는 수레를 중단 할 필요가 하단에 나타납니다 대부분. 건배!

출처

2016-07-26 23:55:46 Sudhanva

는 웹 페이지 콘텐츠를 배치하고이 반응하기 위해 더 나은 방법이 있습니다 컨텐츠 사업부

<div id="header">HEADER</div> 
    <div id="content">this is going to be the content 

     <div id="leftBar">contentntntntntnntnt</div> 

     <p>lol</p> 

    </div> 

<div id="footer">FOOTER</div>

출처

2016-07-26 23:45:50

DIV 안에 CSS DIV

답변

관련 문제