如何创建一个分隔线，它总是在中间(中心)

Question

我有两个相邻的div。其中一个有float: left，另一个有float: right。div包含一个单词。这个单词的字符数在变化。现在我需要一个分隔线来分隔它们，就像这样:| .

这是我的结构: html:

<div id="main">
<div class="left"><?php echo $word1;?></div>
<div class="right"><?php echo $word2;?></div>
</div>

需要注意的是main的大小是固定的。(如200px)

css:

<style>
 #main {width: 200px;}
 .left {float: left}
 .right {float: right}
</style>

例二:

// Initialization
<?php
$word1 = 'foo';
$word2 = 'bar';
?>
// output
+---------------200px------------------+
|foo                                bar|
+--------------------------------------+

Example2:

// Initialization
<?php
$word1 = 'stack';
$word2 = 'overflow';
?>
// output
+---------------200px------------------+
|stack                         overflow|
+--------------------------------------+

现在我需要一个分隔线:|在它们之间。应该注意的是，我希望这一行总是在中间(中心)。我想要这样的输出:

// output
+---------------200px------------------+
|stack ---N px--- | ---N px--- overflow|
+--------------------------------------+

和更多的说明:(Example3)

// Initialization
<?php
$word1 = 'hello world';
$word2 = 'test';
?>
// output
+---------------200px------------------+
|hello world --N px--- | --N px--- test|
+--------------------------------------+

或

+---------------200px------------------+
|hello world           |           test|
+--------------------------------------+

我该怎么做呢?我尝试了border-left(右侧div)，相反，但没有工作。我也尝试了  |  ，但没有工作。

这是我的小提琴border和padding。

Answer 1

如果您只使用"|"字符来分隔div，则只需要对CSS和HTML进行少量更改。注意:div的顺序很重要——分隔符必须在最后:

你的HTML:

<div id="main">
  <div class="left"><?php echo $word1;?></div>
  <div class="right"><?php echo $word2;?></div>
  <div class="center">|</div>
</div>

新CSS:

    .left
    {
        float: left;
    }
    .center
    {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }
    .right
    {
        float: right;
    }

小提琴来了