Question

我在调整项目中的div时遇到了麻烦。我期待这样的事情：

enter image description here

但到目前为止我所做的就像这样：

enter image description here

所有div都有“inline”类

CSS：

div.inline{
    float: left;
}

提前致谢。

Answer 1

简单：

    div {
    width: 100px;
    height: 100px;
    border: 1px solid black;
    float: left;
    margin: 4px;
   }
   div:nth-child(odd) {
    clear: left;
   }

请看这个小提琴： http://jsfiddle.net/QkruA/

Answer 2

为什么不是这样的？只需对deepus代码进行一点调整：虽然父级和子级的宽度必须设置为您的标准

<html>
    <head>
 </head>
      <style>
.inline
{
    width:50px;
    height:50px;
    text-align:center;
    border:1px solid black;
    float:left;
    margin:2px;
}
.main
{
    width:120px;
}

</style>
    </head>
<body >
  <div class="main">
    <div class="inline">div 1</div>
    <div class="inline">div 2</div>
    <div class="inline">div 3</div>
    <div class="inline">div 4</div>
</div>
</body>
</html>

Answer 3

去老派... clear:both

demo

<强> CSS

div.inline{
    float: left;
    width:200px;
    height:200px;
    border:1px solid #000;
}
.clr{
    clear:both;
}

<强> HTML

<div class="inline"></div>
<div class="inline"></div>
<div class="clr"></div> <!-- taa daa...i love old schools methods :) -->
<div class="inline"></div>
<div class="inline"></div>

Answer 4

为什么不在每个div上使用display：inline-block

Answer 5

为了让您在将来轻松添加“左”和“右”课程这样你只需要制作2个非常小的css代码就可以在每次想要向左或向右设置时使用它（所以每次你想要使用它时都不需要再次输入）

CSS代码

.left
{
    float:left;
}
.right
{
    float:right;
}

.box
{
    width:50px;
    height:50px;
    text-align:center;
    border:1px solid black;
    margin:2px;
}
.main
{
    width:120px;
}

HTML代码

<body >
  <div class="main">
    <div class="left box">div 1</div>
    <div class="right box">div 2</div>
    <div class="left box">div 3</div>
    <div class="right box">div 4</div>
</div>
</body>

如何正确对齐div而不将其位置设置为绝对值

5 个答案: