Вертикальное расположение потока в HTML и CSS

У меня есть этот простой HTML страницы:Вертикальное расположение потока в HTML и CSS

.outer { 
 
    width: 320px; 
 
    height: 560px; 
 
    background-color: gray; 
 
    overflow: auto 
 
} 
 
.inner { 
 
    float: left; 
 
    background-color: pink; 
 
    padding: 10px 10px 10px 10px; 
 
    margin: 10px 10px 0px 10px; 
 
    max-width: 60%; 
 
} 
 
.inner2 { 
 
    float: right; 
 
    background-color: pink; 
 
    padding: 10px 10px 10px 10px; 
 
    margin: 10px 10px 0px 10px; 
 
    max-width: 60%; 
 
}

<div class="outer"> 
 
    <div class='inner'>a a a</div> 
 
    <div class='inner'>a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a</div> 
 
    <div class='inner'>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div> 
 
    <div class='inner'>iiiiiiiii iiiiiiiiiii</div> 
 
    <div class='inner2'>iiiiiiiinnnnnnnnnnnnnnniiiii</div> 
 
</div>

Результат является:

Мне нужно организовать дивы в вертикальный макет потока с использованием CSS способом, похожим на чат-программу: некоторые divs слева, а некоторые - вправо. У меня есть два вопроса относительно моего кода:

1- Как заставить второй div перейти к новой строке?

2- Как я могу решить проблему третьего div, т. Е. Заставить очень длинную строку без пробелов, которые будут искажены, точно так же, как второй div?

источник

2016-05-17 AhmadWabbi

Как я могу заставить второй DIV перейти на новую строку

вам нужно clear:both для inner s

Как я могу решить проблему третьего div, т.е. заставить очень длинную линию без пробелов, которые будут искажены, точно так же, как второй div?

использование word-wrap:break: break-word

Я упростил свой код, убрав некоторые ненужного кода

.outer { 
 
    width: 320px; 
 
    height: 560px; 
 
    background-color: gray; 
 
    overflow: auto 
 
} 
 
.outer > div { 
 
    word-wrap: break-word; 
 
    padding: 10px; 
 
    margin: 10px; 
 
    max-width: 60%; 
 
    clear: both 
 
} 
 
.inner { 
 
    float: left; 
 
    background: pink 
 
} 
 
.inner2 { 
 
    float: right; 
 
    background: lightblue 
 
}

<div class="outer"> 
 
    <div class='inner'>a a a</div> 
 
    <div class='inner'>a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a</div> 
 
    <div class='inner'>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div> 
 
    <div class='inner2'>iiiiiiiinnnnnnnnnnnnnnniiiii</div> 
 
    <div class='inner'>iiiiiiiii iiiiiiiiiii</div> 
 
    <div class='inner2'>iiiiiiiinnnnnnnnnnnnnnniiiii</div> 
 
</div>

источник

2016-05-17 13:57:33 dippas

Попробуйте следующее решение с помощью Flexbox:

.outer { 
 
    display:flex; 
 
    flex-direction:column; 
 
    width: 320px; 
 
    height:560px; 
 
    background-color:gray; 
 
    overflow:auto; 
 
} 
 
.inner { 
 
    align-self:flex-start; 
 
    background-color: pink; 
 
    padding:10px 10px 10px 10px; 
 
    margin:10px 10px 0px 10px; 
 
    max-width: 60%; 
 
    word-wrap:break-word; 
 
} 
 
.inner2 { 
 
    align-self:flex-end; 
 
    background-color: pink; 
 
    padding:10px 10px 10px 10px; 
 
    margin:10px 10px 0px 10px; 
 
    max-width: 60%;  
 
}

<body> 
 
    <div class="outer"> 
 
    <div class='inner'> a a a </div> 
 
    <div class='inner'> a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a </div> 
 
    <div class='inner'> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa </div> 
 
    <div class='inner'> iiiiiiiii iiiiiiiiiii </div> 
 
    <div class='inner2'> iiiiiiiinnnnnnnnnnnnnnniiiii </div> 
 
    </div> 
 
</body>

Объяснение: Вы можете использовать Flexbox, чтобы получить все пузырьки в отдельной строке. С помощью self-align вы можете определить сторону отправителя и получателя пузыря. Поэтому вы не должны использовать float. Чтобы сломать длинное слово без пробелов, вы можете использовать word-wrap:break-word;.

источник

2016-05-17 13:56:50

Работает очень хорошо. Спасибо. – AhmadWabbi

Вертикальное расположение потока в HTML и CSS

ответ

Смежные вопросы