проблема с плавающей точкой css - PullRequest
Новая
       9

проблема с плавающей точкой css

1 голос
/ 01 декабря 2009

У меня есть около 8 абзацев, которые я хотел бы плавать влево, но некоторые абзацы содержат больше текста, чем другие.

Поэтому, когда я просматриваю в браузере, я получаю плавающее слева направо нужное мне значение, но получаю несколько коротких абзацев в столбце, когда некоторые абзацы длиннее, а некоторые короче.

Я хочу, чтобы каждый новый абзац был в новом столбце.

Могу ли я сделать это с помощью css или мне нужно будет использовать структуру таблицы?

Извините, я бы показал это визуально, но встроенный HTML-код работает не совсем так, как ожидалось.

Ответы [ 3 ]

2 голосов
/ 01 декабря 2009

Если вы хотите столбцы, вы можете установить ширину класса, который управляет плавающей точкой, в противном случае это блок, занимающий 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>
1 голос
/ 01 декабря 2009

Мне сложно представить, как выглядит ваш макет, но вы пробовали 

 clear: left

и 

 clear: right

Они приводят к тому, что элемент защелкивается до следующей «не всплывающей» позиции. Не уверен, что это касается вашей ситуации.

0 голосов
/ 01 декабря 2009

Установить фиксированную ширину для каждого из абзацев, возможно?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...