한 행에 4 div, html, css

Question

한 행에 4 개의 div를 설정했는데 div 태그의 squaring에 대한 규칙은 알지 못했습니다.

float:left; 첫 번째, 두 번째 및 세 번째 div에 적용됩니다. Fourt div는 float을 가지고 있지 않습니다. 왜냐하면 float을 넣으면 div의 위치가 바뀌고 한 행에 4 div가 없기 때문입니다. 나는 당신이 나를 우습게 생각합니다.

나는 CSS로 표시하려고했다. display : inline-block; 4의 각 div 그러나 일하지 않는 것을 위해.

내 코드를 확인하고 div를 배치하는 규칙을 설명해 주시겠습니까? 감사

HTML 코드 :

<div id="banner5"> 



<div id="banner5About"> 
<p id="banner5Naslov"> ABOUT US </p> 
<img src="http://oi58.tinypic.com/t62xkg.jpg" alt="Banner 5 Slika About"> <br/> <br/> 
<p id="banner5AboutTekst"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> 
<br/> 
<p class="banner5ReadMore"> Read More » </p> 
</div> 


<div id="banner5Linkovi"> 
<p id="QuickLinks"> QUICK LINKS</p> 
</br> 
<ul> 
     <li>&nbsp &nbsp Lorem ipsum dolor sit amet, consectetur </li> 
     <li>&nbsp &nbsp Lorem ipsum dolor sit amet, consectetur </li> 
     <li>&nbsp &nbsp Lorem ipsum dolor sit amet, consectetur </li> 
     <li>&nbsp &nbsp Lorem ipsum dolor sit amet, consectetur </li> 
     <li>&nbsp &nbsp Lorem ipsum dolor sit amet, consectetur </li> 
     <li>&nbsp &nbsp Lorem ipsum dolor sit amet, consectetur </li> 
      <li>&nbsp &nbsp Lorem ipsum dolor sit amet, consectetur </li> 
     <li>&nbsp &nbsp Lorem ipsum dolor sit amet, consectetur </li> 
     <li>&nbsp &nbsp Lorem ipsum dolor sit amet, consectetur </li> 
      <li>&nbsp &nbsp Lorem ipsum dolor sit amet, consectetur </li> 
     <li>&nbsp &nbsp Lorem ipsum dolor sit amet, consectetur </li> 
     <li>&nbsp &nbsp Lorem ipsum dolor sit amet, consectetur </li> 
    </ul> 
</div> 

<div id="banner5Latest"> 
<p id="latestNaslov"> LATEST BLOG POSTS </p> <br/> 
<p id="latestTekst"> Post Title <br/> 
Admin, domainaname.com <br/> Friday, 6th April 2009</p> <br/> 

<p class="latestTekst2"> 
Nulla facilisi. Ut fringilla.Suspendisse potenti. Nunc feugiat mia tellus consequat imperdiet. </p> <br/> 
<span class="banner5ReadMore"><p>Read More » </p></span> <br/> 

<p id="latestTekst"> Post Title <br/> 
Admin, domainaname.com <br/> Friday, 6th April 2009</p> <br/> 
<p class="latestTekst2"> 
Nulla facilisi. Ut fringilla.Suspendisse potenti. Nunc feugiat mia tellus consequat imperdiet. </p> <br/> 

<span class="banner5ReadMore"><p>Read More » </p></span> <br/> 
</p> 
</div> 

<div id="banner5Kontakt"> 
<p id="contactNaslov">CONTACT US</p> <br/> 

<input type="text" class="nameTextBox" name="name_tb"/> 
<input type="text" class="emailTextBox" name="email_tb"/> 
<input type="text" class="subjectTextBox" name="subject_tb"/> 
<textarea class="textarea" rows="10" cols="33"> </textarea> <br/> 
<button class="search_bt"> SUBMIT </button> 

</div> 

</div> 

CSS 코드 :

#banner5{ 
background-color:#1a1a1a; 
border-top: solid; 
border-width:7px; 
border-color:#000000; 
float:left; 
} 

#banner5About{ 
clear: both; 
width:20%; 
float:left; 

} 

#banner5Naslov{ 
font-size:20px; 
color:#FFFFFF; 
padding-left:20px; 
padding-top:40px; 
font-family:Cambria; 
} 
#banner5AboutTekst{ 
color:#676767; 
padding-left:20px; 
font-family:Cambria; 
} 
#banner5ReadMore{ 
padding-left:65%; 
color:#0098FE; 
} 

#banner5Linkovi{ 
padding-top:40px; 
color:#0098FE; 
margin-left:5%; 
width:21.8%; 
float:left; 
} 

#QuickLinks{ 
color:#ffffff; 
} 

li { 
    list-style: none; 
    padding: 5px 0; 
    border-bottom: 1px solid #232323; 
} 
li:before { 
    font-size: 75%; 
    content: '\00bb'; 
    color: #a29e9f; 
    padding-right: 10px; 
} 
#latestNaslov{ 
color:#ffffff; 
} 


#banner5Latest{ 
padding-top:40px; 
margin-left:6%; 
float:left; 
width:20%; 
} 
#latestTekst{ 
color:#676767; 
font-size:14px; 
} 
.latestTekst2{ 
color:#676767; 
} 

#latestTekst::first-line{ 
color:#676767; 
font-size:19px; 
font-weight:bold; 
} 

.banner5ReadMore{ 
color:#0098FE; 
text-align:right; 
} 

#banner5Kontakt{ 
padding-top:40px; 
margin-left:78%; 
} 

#contactNaslov{ 
color:#ffffff; 
} 

input.nameTextBox{ 
margin-bottom:15px; 
    height:35px; 
    width:250px; 
border: 0px solid #a1a1a1; 
    border-radius: 10px; 
background-color:#232323; 
} 
input.emailTextBox{ 
margin-bottom:15px; 
    height:35px; 
    width:250px; 
border: 0px solid #a1a1a1; 
    border-radius: 10px; 
background-color:#232323; 
} 
input.subjectTextBox{ 
margin-bottom:15px; 
    height:35px; 
    width:250px; 
border: 0px solid #a1a1a1; 
    border-radius: 10px; 
background-color:#232323; 
} 
.textarea{ 
background-color:#232323; 
border: 0px solid #a1a1a1; 
    border-radius: 10px; 
    margin-bottom:15px; 
} 

Answer 1

: 브라우저가 기본 사용자 에이전트 스타일 말하는 디스플레이를 가지고 있기 때문에 div 태그에 대한 "디스플레이 인라인"는 작동하지 않습니다 :블록. 따라서이 경우 다음과 같이 스타일을 재정의해야합니다.

div 
{ 
    display:inline !important; 
} 

위와 같이 사용하면 모든 div가 새 줄부터 시작됩니다. 이 경우 모든 div에 "Float : Left"를 사용해야합니다. ReLeaf 질문에 대한

편집 : 필요한 경우

,

CSS :

.styleone 
{ 
    display:inline; 
} 

HTML 코드가 잘 작동

<div class="styleone"> 
    Content 
</div> 

Answer 2

. 당신이 CSS에 쓴 것은 당신이 더 나은

body{ 
    margin:0; 
    width:100%; 
    height:100%; 
    } 

을보고 다음을 추가 할 수 있으며 추가 할 필요는 없습니다 그 추가에 좋다 "플로트 : 왼쪽"당신이 다섯 번째 사업부를 추가하지 않으면 네 번째 DIV에.