CSS - Выравнивание текста по левому и правому краю - несколько строк

#css #alignment

#css #выравнивание

Вопрос:

Я новичок в CSS, и мне не удается делать то, что мне нужно.

Я хочу отобразить некоторый текст слева и справа в одной строке, а затем только справа во второй строке.

HTML :

 <div class="myDiv">
    <p class="alignleft"> Text on the left.</p>
    <p class="alignright">Text on the right.</p>
    <p class="alignright2">Text on the right 2.</p>
</div>
<div class="myDiv">
    <p class="alignleft"> Text on the left.</p>
    <p class="alignright">Text on the right.</p>
    <p class="alignright2">Text on the right 2.</p>
</div>

CSS :

 .myDiv{
    margin: 0 25% 10px 25%; 
    border-style: dashed;
    border-width: 1px;
}

.alignleft {
    float: left;
}

.alignright {
   float: right;
}

«Текст справа 2» должен быть под «Текстом справа».

Это должно быть очень просто, но, как я уже сказал, я новичок…

Ответ №1:

Попробуйте это, если это работает так, как вам нужно.

 .alignright2 {
    float: right;
    clear: right;
}

http://jsfiddle.net/R7LA2/2/

Ответ №2:

Это работает скрипка

 .alignleft {
    text-align:left;
}
.alignright {
    text-align:right;
}

.alignright2 {
    text-align:right;
}

Ответ №3:

Попробуйте это:

HTML

 <div class="myDiv">
    <p class="alignleft"> Text on the left.</p>        
    <p class="alignright">Text on the right.</p>
    <div style="clear:left;"></div>
    <p class="alignright2">Text on the right 2.</p>   
    <div style="clear:right;"></div>
</div>
<div class="myDiv">
    <p class="alignleft"> Text on the left.</p>
    <p class="alignright">Text on the right.</p>
    <div style="clear:left;"></div>
    <p class="alignright2">Text on the right 2.</p>
    <div style="clear:right;"></div>
</div>

css

 .myDiv{
    margin: 0 25% 10px 25%; 
    border-style: dashed;
    border-width: 1px;"
}

.alignleft {
    float: left;
}
.alignright {
    float: right;
}

.alignright2 {
    float:right;
}

скрипка

Ответ №4:

Попробуйте добавить

 .alignright2 {
    display:inline-block;
    margin-left:50%;
}

Скрипка:

Вы можете изменить поля в соответствии с вашим текстом или вам нужно изменить свой html, заменив абзац right2 на div.

Ответ №5:

Добавьте это в свой css:

 .alignright2 {
text-align:right;
clear:right;
}

http://jsfiddle.net/R7LA2/16/

Ответ №6:

Вместо добавления дополнительных тегов в ваш HMTL, альтернативное решение для вашего кода.

Просто измените свой css:

 .myDiv{
    margin: 0 25% 10px 25%; 
    border-style: dashed;
    border-width: 1px;
    display:inline-block; // Newly added...
}

.alignleft {
    float: left;
}
.alignright {
    float: right;
}

.alignright2 {
    float:right;// Newly added...
}

ДЕМОНСТРАЦИЯ