一行4个div，html，css

我在一行中设置了4个div，我不知道压缩div标签的规则，但我成功地设置了它们

float：左应用于第一、第二和第三个div。Fourt div没有float，因为如果我放置float，它将改变div的位置，not将是一行中的4个div。
我想你会理解我的

我试图在css显示中编写：内联块；每四个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>

div标记的“display:inline”不起作用，因为浏览器具有默认的用户代理样式表display:block。因此，在本例中，您需要使用以下命令覆盖该样式

div
{
  display:inline !important;
}

如果您像上面那样使用，所有div将从新行开始。在这种情况下，您需要对所有div使用“Float:Left”

重新发布问题的编辑：

如有需要,

CSS:

HTML


内容
您的代码工作正常。你用CSS写的东西很好，你可以添加以下内容来让它看起来更好

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

除非添加第五个div，否则没有必要在第四个div中添加“float:left”。
我强烈建议不要使用！这里有重要的标签。如果你的选择器足够具体，你就不需要使用它，这样做会使你所有的div显示为内联的，这可能不是你想要的。ReLeaf：是的。在这种情况下，您可以创建一个类并编写您的样式，正如我现在提到的（编辑后）。谢谢，你能告诉我是否有必要为主div添加float，在这种情况下，他被称为“banner5”。我是否总是为主div添加浮动，或者只有在某些情况下才有必要添加浮动？@nike992在这种情况下，“banner5”不需要浮动。好的，谢谢@Vicki在这种情况下需要为主div设置浮动，当我说主div时，我认为在一个主div中我有几个div？@nike992因为“banner5”是一个容器，它不需要浮动：除非它包含在其他类似布局的div中。
.styleone
{
  display:inline;
}

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

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