Question

我试图将三个div并排放置第四个div在下一行。我使用了float:left和width:33%。我需要申请什么其他财产来实现这一目标？

编辑：关于相同的CSS样式还有一件事，我在css .divinline中创建了 display：inline 属性，但渲染没有区别。我已经学会了显示：block将占据整行。它被覆盖了吗？

Answer 1

正如@Imran正确建议的那样，当您在html中使用它们时，需要删除css类名前的.。尝试：

＆＃13;

.divinline{
  display:block;
  float:left;
  width:33%;

}
.maindiv{
  display:block;
}

＆＃13;

<div class="maindiv">

     <div class="divinline"> <!-- here the class is class="divline" and not .divline -->
       HI
     </div>
     <div class="divinline">
       HI
     </div>
     <div class="divinline">
       HI
     </div>
     <div class="divinline">
       HI
     </div>
</div>

＆＃13;

＆＃13;
在这里小提琴：https://jsfiddle.net/nithin_krishnan/r0Lyydg8/

Answer 2

另一种方式如下

<div>
<div style="float:left;width:100px">1</div>
<div style="float:left;width:100px">2</div>
<div style="float:left;width:100px">3</div>
<div style="float:left;width:100px">4</div>
</div>

将div放在一起

2 个答案: