Question

我有这个代码（必须在4个部分中拆分以显示确定）：

<div class="list_item" id="item_1">
<div class="list_item_int">Andrés Bedoya</div>
<div class="list_item_big" title="Soy Andr s Bedoya el programador de este maravilloso software">Soy Andr s Bedoya el programador de este maravilloso software</div>
<div class="list_item_big" title="Este es un trabajo de prueba para confirmar que todo funcione correctamente">Este es un trabajo de prueba para confirmar que todo...</div>
<div class="list_item_small"><a href="php/judge_detail.php?work_id=1">Archivos inscritos</a></div>
<div class="eval_buttons">
    <div class="approve" id="approve_1"></div>
    <div class="dismiss" id="dismiss_1"></div>
</div>

<div class="list_item" id="item_2">
<div class="list_item_int">Alexandra MÃƒÂ¡rquez</div>
<div class="list_item_big" title="Soy la esposa de Yo">Soy la esposa de Yo</div>
<div class="list_item_big" title="Prueba corta">Prueba corta</div>
<div class="list_item_small"><a href="php/judge_detail.php?work_id=2">Archivos inscritos</a></div>
<div class="eval_buttons">
    <div class="approve" id="approve_2"></div>
    <div class="dismiss" id="dismiss_2"></div>
</div>

<div class="list_item" id="item_5">
<div class="list_item_int">Pedro PÃ©rez</div>
<div class="list_item_big" title="Prueba o al menos eso creo personaje inventado">Prueba o al menos eso creo personaje inventado</div>
<div class="list_item_big" title="Este trabajo es el tercero de la categorÃ a Negocios tipo Individual que se escribe y espero que me solucione el problema de las lÃ neas hacia abajo y los botones que se borran">Este trabajo es el tercero de la categorÃ a Negocios tipo Individual...</div>
<div class="list_item_small"><a href="php/judge_detail.php?work_id=5">Archivos inscritos</a></div>
<div class="eval_buttons">
    <div class="approve" id="approve_5"></div>
    <div class="dismiss" id="dismiss_5"></div>
</div>

<div class="clear"></div>

这个CSS显示它：

.list_item{ height: 48px; line-height: 24px; background: transparent url(images/bg_list_item.png) no-repeat scroll bottom; font-size: 0.7em; float: left; width: 100%; }
.list_item .list_item_int{ float: left; width: 230px; text-align: left; text-indent: 20px; font-size: 1em; font-weight: bold; }
.list_item .list_item_big{ float: left; width: 200px; text-align: justify; margin: 0px 10px 0px 0px; }
.list_item .list_item_small{ float: left; width: 130px; text-align: center; }
.list_item .eval_buttons{ width: 200px; height: 38px; float: left; line-height: 48px; margin-left: 10px; margin-top: 10px; }
.list_item .eval_buttons .approve{ width: 93px; height: 25px; cursor: pointer; background: transparent url(images/boton_aprobar.png) no-repeat scroll top; float: left; }
.list_item .eval_buttons .dismiss{ width: 93px; height: 25px; cursor: pointer; background: transparent url(images/boton_descartar.png) no-repeat scroll top; float: right; }
.list_item a{ color: #195e87; text-decoration: none; font-weight: bold; }
.list_item a:hover{ text-decoration: underline; }

但是我在IE8中正确地显示它时遇到问题，而我对firefox或Google Chrome没有任何问题（请查看链接以查看它）：

See the problem

有没有办法解决它？

Answer 1

您可能会尝试使用固定为（或宽度为百分比）的元素替换所有浮动。

Answer 2

您提供的ID会发生什么情况。也会float:left而不是float:right？

Answer 3

嗯，Litso有点粗鲁，冒犯我的代码，但没关系。他让我意识到我可以使用另一种方法解决问题并轻松解决。我创建了一个表并将所有信息放在trs和tds中......这样，最后一行永远不会出错，并保持原样。好吧，多亏了Litso。我知道我的代码有点差，我可能会遭受“Divitis”，但我只是一名初级程序员。

<tr class="list_item" id="item_1"> 
<td class="list_item_int">Andrés Bedoya</td> 
<td class="list_item_big" title="Soy Andr s Bedoya el programador de este maravilloso software">Soy Andr s Bedoya el programador de este maravilloso software</td> 
<td class="list_item_big" title="Este es un trabajo de prueba para confirmar que todo funcione correctamente">Este es un trabajo de prueba para confirmar que todo...</td> 
<td class="list_item_small"><a href="php/judge_detail.php?work_id=1">Archivos inscritos</a></td> 
<td class="eval_buttons"> 
    <a class="approve" id="approve_1"></a> 
    <a class="dismiss" id="dismiss_1"></a> 
</td>
</tr>

在Explorer中显示页面

3 个答案: