Question

我在一行中设置了4个div，我不知道测序div标签的规则，但我设法设置它们。

float:left;适用于第一，第二和第三div。 Fourt div没有浮动，因为如果我把浮动那将改变div的位置，并且不会是一行4 div。我想你会理解我的。

我试着写css display：inline-block;对于每个四分之一但不起作用。

你可以检查我的代码，并解释我将div放入行的规则。感谢

HTML CODE：

 <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

您的代码运行正常。你在CSS中写的内容很好，你可以添加以下内容以便更好看

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

除非你添加第五个div，否则没有必要将“float：left”添加到第四个div。

Answer 2

div标签的“display：inline”无效，因为浏览器的默认用户代理样式表显示为：block。因此，在这种情况下，您需要通过使用如下覆盖该样式。

div
{
  display:inline !important;
}

如果您使用上述内容，则所有div将从新行开始。在这种情况下，您需要为所有div使用“Float：Left”。

编辑ReLeaf问题：

如果需要，

CSS：

.styleone
{
  display:inline;
}

HTML

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

一行4个div，html，css

2 个答案: