Question

我遇到了一个问题，我不知道为什么会这样，但是我在CSS上创建了3个ID，分别命名为first，second和third，并将它们对齐为left，使其全部以320px的宽度内联。现在我试图将相同的div放在内联的第二行，但它们正在搞乱。第二行从页面中间开始，只有第三行显示正确的方式。第一个从左边开始，下一个从页面中间开始，下一个从左边开始，依此类推......

这是JSFiddle文件：Example

您必须将结果框左侧展开到最大宽度，以便您可以看到我在说什么。

HTML：

<a href="#">
    <div id="first" align="left"><img src="http://www.main-hosting.com/hostinger/welcome/index/folder.png"><strong> Empty-Field/</strong></div>
    <div id="second">-</div>
    <div id="third" align="right">Last Update - January  0, 2014 00:00:00</div>
</a>

<a href="#">
    <div id="first" align="left"><img src="http://www.main-hosting.com/hostinger/welcome/index/folder.png"><strong> Empty-Field/</strong></div>
    <div id="second">-</div>
    <div id="third" align="right">Last Update - January  0, 2014 00:00:00</div>
</a>

CSS：

#first {
    width:320px;
    float:left;
}
#second {
    width:320px;
    float:left;
}
#third {
    width:320px;
    float:left;
}

Answer 1

演示：http://jsfiddle.net/vyxN4/6/

<a class="fll" href="#">
    <div id="first" align="left"><img src="http://www.main-hosting.com/hostinger/welcome/index/folder.png"><strong> Empty-Field/</strong></div>
    <div id="second">-</div>
    <div id="third" align="right">Last Update - January  0, 2014 00:00:00</div>
    </a><div class="clear"></div>
<a class="fll" href="#">
    <div id="first" align="left"><img src="http://www.main-hosting.com/hostinger/welcome/index/folder.png"><strong> Empty-Field/</strong></div>
    <div id="second">-</div>
    <div id="third" align="right">Last Update - January  0, 2014 00:00:00</div>
</a><div class="clear"></div>
<a class="fll" href="#">
    <div id="first" align="left"><img src="http://www.main-hosting.com/hostinger/welcome/index/folder.png"><strong> Empty-Field/</strong></div>
    <div id="second">-</div>
    <div id="third" align="right">Last Update - January  0, 2014 00:00:00</div>
</a><div class="clear"></div>
<a class="fll" href="#">
    <div id="first" align="left"><img src="http://www.main-hosting.com/hostinger/welcome/index/folder.png"><strong> Empty-Field/</strong></div>
    <div id="second">-</div>
    <div id="third" align="right">Last Update - January  0, 2014 00:00:00</div>
</a><div class="clear"></div>
<a class="fll" href="#">
    <div id="first" align="left"><img src="http://www.main-hosting.com/hostinger/welcome/index/folder.png"><strong> Empty-Field/</strong></div>
    <div id="second">-</div>
    <div id="third" align="right">Last Update - January  0, 2014 00:00:00</div>
</a>

CSS

#first, #second, #third, .fll {
  float:left;
}

.clear:{
    clear: both;
}

Answer 2

使用类而不是ID ，您的浏览器可能不喜欢无效的标记。 ID用于一次使用的唯一元素。课程可供多种用途使用。

您还必须正确处理浮动。通过在每行之后添加clear: both;，您可以停止此“中间的第二行”。

试试这个：

<a href="#">
    <div class="first" align="left"><img src="http://www.main-hosting.com/hostinger/welcome/index/folder.png"><strong> Empty-Field/</strong></div>
    <div class="second">-</div>
    <div class="third" align="right">Last Update - January  0, 2014 00:00:00</div>
</a>

<br class="clear" />

<a href="#">
    <div class="first" align="left"><img src="http://www.main-hosting.com/hostinger/welcome/index/folder.png"><strong> Empty-Field/</strong></div>
    <div class="second">-</div>
    <div class="third" align="right">Last Update - January  0, 2014 00:00:00</div>
</a>

和CSS：

.first {
    width:320px;
    float:left;
}
.second {
    width:320px;
    float:left;
}
.third {
    width:320px;
    float:left;
}
.clear {
    clear: both;
}

Answer 3

您必须在表格中更改您的布局，如下所示：

<强> HTML

    <div id="tableCont">
<div class="tableCol">    
<a href="#">
    <div class="first" align="left"><img src="http://www.main-hosting.com/hostinger/welcome/index/folder.png"><strong> Empty-Field/</strong></div>
    <div class="second">-</div>
    <div class="third" align="right">Last Update - January  0, 2014 00:00:00</div>
</a>
    </div>    
    <div class="tableCol">  
<a href="#">
    <div class="first" align="left"><img src="http://www.main-hosting.com/hostinger/welcome/index/folder.png"><strong> Empty-Field/</strong></div>
    <div class="second">-</div>
    <div class="third" align="right">Last Update - January  0, 2014 00:00:00</div>
</a>
    </div>
        <div class="tableCol">  
<a href="#">
    <div class="first" align="left"><img src="http://www.main-hosting.com/hostinger/welcome/index/folder.png"><strong> Empty-Field/</strong></div>
    <div class="second">-</div>
    <div class="third" align="right">Last Update - January  0, 2014 00:00:00</div>
</a>
<a href="#">
    <div class="first" align="left"><img src="http://www.main-hosting.com/hostinger/welcome/index/folder.png"><strong> Empty-Field/</strong></div>
    <div class="second">-</div>
    <div class="third" align="right">Last Update - January  0, 2014 00:00:00</div>
</a>
<a href="#">
    <div class="first" align="left"><img src="http://www.main-hosting.com/hostinger/welcome/index/folder.png"><strong> Empty-Field/</strong></div>
    <div class="second">-</div>
    <div class="third" align="right">Last Update - January  0, 2014 00:00:00</div>
</a>
    </div>
    </div>

<强> CSS

.first {
  width:320px;
    display:table-cell;
}
.second {
  width:320px;
    display:table-cell;
}
.third {
  width:320px;
    display:table-cell;
}

#tableCont{
    display:table;
}

.tableCol{

}

fiddle

Answer 4

    try clearfix in your code to clear the float blocks

http://jsfiddle.net/aashi/vyxN4/13/

或使用display：inline-block代替float http://jsfiddle.net/aashi/vyxN4/14/

你可以从html＆＃34;

中删除＆＃34; align：left

内联div的行搞砸了

4 个答案: