1. 首页
  2. 问答
  3. css float问题

css float问题

2009-12-01 117 views
1

我有大约8段我想向左浮动，但有些段落比其他段落有更多的文本。css float问题

所以当我在浏览器中查看时，我从左到右浮动，我想要，但是当一些段落更长，一些更短时，我会在一列中得到多个短段落。

我想要的是为每个新的段落在一个新的列。

我可以用CSS来做这件事吗，还是我需要使用表格结构？

对不起，我会直观地显示这个，但内联html不能按预期工作。

来源

2009-12-01 vwfreak

+0

这将有助于如果你能张贴一些代码，甚至更好地链接到你得到的东西，也许是你想要的Photoshop模型。 – 2009-12-01 18:06:59

+0

你的问题有点混乱。你说你想让每个段落在它自己的列中，这表明你想要8列。但是你给出的表格的例子有3列，每列不是段落。如果你能澄清一点，你可能会从比我聪明的人那里得到很多好的答案。 :) – Cfreak 2009-12-01 18:12:23

+0

如果您将html文件上传到服务器，然后给我们一个链接，这可能会有所帮助。 – 2009-12-01 18:17:42

回答

1

我有麻烦想象你的布局是什么样子，但你尝试过

clear: left

和

clear: right

？

它们导致元素捕捉到下一个“未打开”位置。不知道这是否解决你的情况。

来源

2009-12-01 18:07:28

0

为每个段落设置一个固定的宽度？

来源

2009-12-01 18:12:59

2

如果你想列，您可以为控制浮动类的宽度，否则它是一个块，占用100％，其容器的宽度：

<!DOCTYPE HTML> 
<html> 
    <head> 
     <title>de titel</title> 
     <style type="text/css"> 
       .left 
       { 
       float:left; 
       width:100px; 
       } 
       body 
          { 
          width:2300px; 
          } 
     </style> 
    </head> 
    <body> 
     <p class="left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin facilisis dui sed magna faucibus consectetur. Sed erat mauris, accumsan sit amet faucibus in, facilisis ut metus. Integer at eros non mi porttitor mattis nec quis sem. Aliquam consequat sem vel sapien dictum vulputate. Curabitur justo sapien, lacinia sed porttitor sit amet, sollicitudin eu elit. Nulla facilisi. Nulla lectus felis, sollicitudin eget commodo vel, vestibulum vel metus. Aliquam sagittis leo eget orci venenatis viverra. Nulla arcu est, interdum non semper sit amet, vulputate vitae neque. Etiam sit amet augue quis nibh tristique vehicula. Suspendisse sem magna, sagittis quis pretium nec, faucibus id leo. Quisque vel lacinia purus. Donec ante mauris, elementum quis tincidunt gravida, interdum non libero. Sed mollis pretium orci, eget tempus mi elementum semper. In hac habitasse platea dictumst. Aenean lectus nibh, convallis ac fringilla eu, molestie a turpis. </p> 
     <p class="left"> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin facilisis dui sed magna faucibus consectetur. Sed erat mauris, accumsan sit amet faucibus in, facilisis ut metus. Integer at eros non mi porttitor mattis nec quis sem. Aliquam consequat sem vel sapien dictum vulputate. Curabitur justo sapien, lacinia sed porttitor sit amet, sollicitudin eu elit. 
     </p> 
     <p class="left"> 
     Donec ante mauris, elementum quis tincidunt gravida, interdum non libero. Sed mollis pretium orci, eget tempus mi elementum semper. In hac habitasse platea dictumst. Aenean lectus nibh, convallis ac fringilla eu, molestie a turpis. 
     </p> 
     <p class="left"> 
     Aliquam consequat sem vel sapien dictum vulputate. Curabitur justo sapien, lacinia sed porttitor sit amet, sollicitudin eu elit. Nulla facilisi. Nulla lectus felis, sollicitudin eget commodo vel, vestibulum vel metus. Aliquam sagittis leo eget orci venenatis viverra. Nulla arcu est, interdum non semper sit amet, vulputate vitae neque. Etiam sit amet augue quis nibh tristique vehicula. Suspendisse sem magna, sagittis quis pretium nec, faucibus id leo. Quisque vel lacinia purus. 
     </p> 
     <p class="left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin facilisis dui sed magna faucibus consectetur. Sed erat mauris, accumsan sit amet faucibus in, facilisis ut metus. Integer at eros non mi porttitor mattis nec quis sem. Aliquam consequat sem vel sapien dictum vulputate. Curabitur justo sapien, lacinia sed porttitor sit amet, sollicitudin eu elit. Nulla facilisi. Nulla lectus felis, sollicitudin eget commodo vel, vestibulum vel metus. Aliquam sagittis leo eget orci venenatis viverra. Nulla arcu est, interdum non semper sit amet, vulputate vitae neque. Etiam sit amet augue quis nibh tristique vehicula. Suspendisse sem magna, sagittis quis pretium nec, faucibus id leo. Quisque vel lacinia purus. Donec ante mauris, elementum quis tincidunt gravida, interdum non libero. Sed mollis pretium orci, eget tempus mi elementum semper. In hac habitasse platea dictumst. Aenean lectus nibh, convallis ac fringilla eu, molestie a turpis. </p> 
     <p class="left"> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin facilisis dui sed magna faucibus consectetur. Sed erat mauris, accumsan sit amet faucibus in, facilisis ut metus. Integer at eros non mi porttitor mattis nec quis sem. Aliquam consequat sem vel sapien dictum vulputate. Curabitur justo sapien, lacinia sed porttitor sit amet, sollicitudin eu elit. 
     </p> 
     <p class="left"> 
     Donec ante mauris, elementum quis tincidunt gravida, interdum non libero. Sed mollis pretium orci, eget tempus mi elementum semper. In hac habitasse platea dictumst. Aenean lectus nibh, convallis ac fringilla eu, molestie a turpis. 
     </p> 
     <p class="left"> 
     Aliquam consequat sem vel sapien dictum vulputate. Curabitur justo sapien, lacinia sed porttitor sit amet, sollicitudin eu elit. Nulla facilisi. Nulla lectus felis, sollicitudin eget commodo vel, vestibulum vel metus. Aliquam sagittis leo eget orci venenatis viverra. Nulla arcu est, interdum non semper sit amet, vulputate vitae neque. Etiam sit amet augue quis nibh tristique vehicula. Suspendisse sem magna, sagittis quis pretium nec, faucibus id leo. Quisque vel lacinia purus. 
     </p> 
    </body> 
</html>

来源

2009-12-01 18:49:39 tahdhaze09

+0

我给身体添加了一个宽度，这样就可以让段落像列一样穿过。 – tahdhaze09 2009-12-01 19:13:26

相关问题

 相关问题