css float problem
I have about 8 paragraph开发者_如何转开发s which I would like to float left, but some of the paragraphs have more text than others.
So when I view in a browser, I get the left to right floating that I want, but I get multiple short paragraphs in a column when some paragraphs are longer and some are shorter.
What I want is for each new paragraph to be in a new column.
Can I do this with css, or will I need to use a table structure?
Sorry, I would show this visually but the inline html doesn't work quite as expected.
If you want columns, you could set a width on the class that controls the float, otherwise it's a block and takes up 100% of the width of its container:
<!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>
I have trouble picturing what your layout looks like but have you tried
clear: left
and
clear: right
?
They cause the element to snap to the next "unfloated" position. Not sure whether that addresses your situation though.
Set a fixed width to each of the paragraphs perhaps?
加载中,请稍侯......
精彩评论