在一行4個div，html，css

Question

我在一行中設置了4個div，我不知道用於順序div標籤的規則，但是我設法設置了它們。

float:left;適用於第一，第二和第三格。法院的div沒有浮動，因爲如果我把浮動多數民衆贊成將更改div的位置，而不會在一行4格。 我想你會跟我說話。

我試圖寫在CSS顯示：inline-block;對於每個四分之一但不工作。

你可以檢查我的代碼，並解釋我將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%; 
    } 

，它不是必須加貼「浮動：左」除非添加第五格到第四格。