解决方案1：

HTML：

<div>
    <div class="left">left text</div>
    <div class="right">right text</div>
</div>

CSS：

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

解决方案2：

HTML：

<div>
    <div class="left">left text</div><!-- no space here
 --><div class="right">right text</div>
</div>

CSS：

.left {
    text-align: left;
}
.right {
    text-align: right;
}
.left, .right {
    display: inline-block;
    width: 50%;
}

Answer 2

<html>
<head>
<style type="text/css">
  div span.left, div span.right { display:  inline-block; width: 50%; }

  span.left { float: left; }

  span.right {float: right; text-align: right; }
</style>
</head>
<body>
  <div>
    <span class=left>Left Text</span>
    <span class=right>Right Text</span>
  </div>
</body>

Answer 3

这就是我要做的事情：

    .left {
        text-align: left;
        float: left;
        clear: none;
        width: 50%;
    }
    .right {
        text-align: right;
        float: right;
        clear: none;
        width: 50%;
    }


<div>
    <div class="right">right text</div>
    <div class="left">left text</div>
</div>

并确保将右侧FIRST上显示的那个放在标记中，如上所述。

Answer 4

试试这个：

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

<html>
<head>
</head>
<body>
<div class="left">
<p>Lorem ipsum dolor.</p>
</div>
<div class="right">
<p>Lorem ipsum dolor</p>
</div>
</body>
</html>

Answer 5

如上所述，如果不修改html，你可以使用伪选择器，这些选择器仅限于第一行，第一个孩子等等http://www.w3.org/TR/CSS2/selector.html#pseudo-element-selectors。

除此之外，您需要使用javascript在文本渲染后对文本应用格式。看看这个堆栈溢出的帖子。

CSS to increase size of first word

CSS如何在同一个div中左对齐一个单词和另一个单词？

5 个答案:

解决方案1：

HTML：

CSS：

解决方案2：

HTML：

CSS：