심플에 CSS float 속성

Question

내 브라우저에 Google 크롬을 사용하고 있습니다. 메모장을 선호하지만 강사가 코드 작성을 위해 모질라 심벌을 사용하고 있습니다.

그래서 ... 나는이 두 div가 서로 옆에 뜨도록하려고합니다.

<div id="content"> 

    <div id="1"> 
     <p id="date" align="right">Friday - 13 Jun 2014</p> 
     <p id="blog" align="center">Kaila didn't sit with us at recess today. At lunch she sat with for a short perod of time then Anna invited her to sit wth them and she tagged along. <br />Mylene said I got a 100% on the science test yesterday. Then I came across my other friends and they said the same thing. hhmmm.... I'll just wait until monday.</p> 
     <p id="feeling">feeling 'DISAPPOINTED and EAGER'</p> 
    </div> 
    <div id="2"> 
     <p id="date" align="right">Thursday - 12 Jun 2014</p> 
     <p id="blog" align="center">Met this new Filipino girl at recess today. Her name is Kaila. She's in 3 of my classes. I wonder what she's like...</p> 
     <p id="feeling">feeling 'ANXIOUS'</p> 
    </div> 

    </div> 

CSS :

#content { 
    border-radius:20px; 
    background:white; 
    opacity:0.6; 
    overflow:auto; 
    position:absolute; 
    top:30%; 
    left:20%; 
    right:5%; 
    height:70%; 
    width:75%;} 

    #date { 
    font-family: 'Didact Gothic', sans-serif; 
    font-size:10px; 
    color:#7A7A7A;} 

    #blog { 
    font-family: 'Handlee', cursive; 
    font-size:18px; 
    color:black;} 

    #feeling { 
    font-family: 'Neucha', cursive; 
    font-size:16px; 
    color:#4D4D4D;} 

    #1 { 
    position:relative; 
    width:45%; 
    left:3%; 
    right:4%; 
    float:left;} 
    #2 { 
    position:relative; 
    width:45%; 
    right:3%; 
    float:left;} 

가 대단히 감사합니다이는 HTML입니다 https://jasminebanares.makes.org/thimble/MTM0MDgwMTAyNA==/mini-blog

-

이

는 웹 사이트입니다. 다시 한번 ..

을 나에게 내가 만든 오류를 얘기하고 필요한 경우 수정하십시오 - 사전 : 사업부 모두의

Answer 1

세트 50 % (나는 안전을 위해 49 %을) 폭에 감사를

#1 { 
    position:relative; 
    width:45%; 
    left:3%; 
    right:4%; 
    float:left; 
    width:49% 
} 

#2 { 
    position:relative; 
    width:45%; 
    right:3%; 
    float:left; 
    width:49% 
} 

Answer 2

코드는 바른 길에 있었다, 문제는 잘못된 브라우저에서 읽을되지 것 수로 시작된 CSS의 ID 선택기를 사용했다이었다. 클래스 선택자는 숫자가 아닌 ID로 시작할 수 있습니다. 이는 ID로 시작하는 HTML에서 ID가 작동하지 않는다는 의미가 아니라 CSS가 셀렉터로 직접 읽을 수 없다는 것을 의미합니다.

여기 예를 들어, Fiddle showing the solution

입니다 :

#1 { 
    /* CSS styles here */ 
} 

이 무시됩니다, 당신 div의 그들에게 적용된 스타일을 표시하지 않은 따라서 이유. 그 div의의 ID가 편지 시작하는 변경되면, 그들은 갑자기 응답 시작 :

#div1 { 
    /* CSS styles here */ 
} 

당신이 어떤 이유로 당신의 ID를 변경할 수없는 경우, 여기에 handy way of selecting them anyway