Question

我是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上的文字”应位于“右侧文字”下。

应该很简单，但就像我说我是初学者......

Answer 1

如果它可以根据需要运行，请尝试此操作。

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

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

Answer 2

这有效fiddle

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

.alignright2 {
    text-align:right;
}

Answer 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;
}

fiddle

Answer 4

尝试添加

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

Fiddle:

您可以根据您的文字更改保证金，或者您需要通过将right2段改为div来更改您的html。

Answer 5

将此添加到您的css：

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

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

Answer 6

不要在HTML中添加任何额外的标记，而是代码的替代解决方案。

改变你的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...
}

Demo

CSS - 文本左右对齐 - 多行

6 个答案: