Html 用边框分隔两段

请给我一个简单的问题，但对像我这样的新手来说很困惑，努力解决这个问题。我尝试了桌面和安卓系统，但仍然得到同样的结果

我有这样的代码

`

.盒子{
背景颜色：蓝色；
边框：10px实心#000；
身高：100%；
宽度：600px；
保证金：自动；
溢出：隐藏；
填充：20px；
}
.par1{
宽度：50%；
浮动：左；
边框：1px实心#fff；
保证金：1px；
}

读者在查看页面布局时会被页面的可读内容分散注意力，这是一个早已确定的事实。使用Lorem Ipsum的意义在于，它的字母分布或多或少是正态的，而不是使用“此处内容，此处内容”，使其看起来像可读的英语。许多桌面发布软件包和网页编辑器现在使用Lorem Ipsum作为默认模型文本，搜索“Lorem Ipsum”将发现许多尚处于起步阶段的网站。


读者在查看页面布局时会被页面的可读内容分散注意力，这是一个早已确定的事实。使用Lorem Ipsum的意义在于，它的字母分布或多或少是正态的，而不是使用“此处内容，此处内容”，使其看起来像可读的英语。许多桌面发布软件包和网页编辑器现在使用Lorem Ipsum作为默认模型文本，搜索“Lorem Ipsum”将发现许多尚处于起步阶段的网站。

`

---

当我在浏览器中运行它时，文本不能分成两个面。你好

您可以在段落之间添加

元素

代码：

.盒子{
背景颜色：蓝色；
边框：10px实心#000；
身高：100%；
宽度：600px；
保证金：自动；
溢出：隐藏；
填充：20px；
}
.par1{
宽度：50%；
浮动：左；
边框：1px实心#fff；
保证金：1px；
}

读者在查看页面布局时会被页面的可读内容分散注意力，这是一个早已确定的事实。使用Lorem Ipsum的意义在于，它的字母分布或多或少是正态的，而不是使用“此处内容，此处内容”，使其看起来像可读的英语。许多桌面发布软件包和网页编辑器现在使用Lorem Ipsum作为默认模型文本，搜索“Lorem Ipsum”将发现许多尚处于起步阶段的网站。



读者在查看页面布局时会被页面的可读内容分散注意力，这是一个早已确定的事实。使用Lorem Ipsum的意义在于，它的字母分布或多或少是正态的，而不是使用“此处内容，此处内容”，使其看起来像可读的英语。许多桌面发布软件包和网页编辑器现在使用Lorem Ipsum作为默认模型文本，搜索“Lorem Ipsum”将发现许多尚处于起步阶段的网站。

方框宽度为50%，每侧边距为1px，每侧边距为1px。所以每个盒子是50%+4px。。。这就是为什么它被包装成一条新的线

框大小：边框框

将在您的50%中包含边框大小，您只需不使用边距即可。

.box{
    .box{
        background-color: blue;
        height: 100%;
        width: 600px;
        margin: auto;
        overflow: hidden;
        padding:20px;
    }

    .par1{
        width: 50%;
        float: left;
        text-align: justify;
    }
    .par1 p { padding:  5px;  border-right:
      1px solid white;
    }

    .par2
    {
        width: 50%;
        float: left;
        text-align: justify;
    }
    .par2 p { padding:  5px; 
      border-left: 1px solid white;
    }


<div class="box">
<div class="par1">
    <p>
    It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. 
    </p>
</div>
<div class="par2">
    <p>
    It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. 
    </p>
</div>

背景颜色：蓝色；
身高：100%；
宽度：600px；
保证金：自动；
溢出：隐藏；
填充：20px；
}
.par1{
宽度：50%；
浮动：左；
文本对齐：对齐；
}
.par1 p{填充：5px；右边框：
1px纯白；
}
.帕尔2
{
宽度：50%；
浮动：左；
文本对齐：对齐；
}
.par2 p{填充：5px；
左边框：1px纯白；
}

读者在查看页面布局时会被页面的可读内容分散注意力，这是一个早已确定的事实。使用Lorem Ipsum的意义在于，它的字母分布或多或少是正态的，而不是使用“此处内容，此处内容”，使其看起来像可读的英语。许多桌面发布软件包和网页编辑器现在使用Lorem Ipsum作为默认模型文本，搜索“Lorem Ipsum”将发现许多尚处于起步阶段的网站。


读者在查看页面布局时会被页面的可读内容分散注意力，这是一个早已确定的事实。使用Lorem Ipsum的意义在于，它的字母分布或多或少是正态的，而不是使用“此处内容，此处内容”，使其看起来像可读的英语。许多桌面发布软件包和网页编辑器现在使用Lorem Ipsum作为默认模型文本，搜索“Lorem Ipsum”将发现许多尚处于起步阶段的网站。

如果他想让两个s之间的边界叠在一起，他会让它们100%宽，不会浮动。他显然是想让它们和边框并排。嘿，哥们，我的朋友在没有框大小的情况下编码：边框框。他做到了。但是这里没有使用PAR 1类中的余量，他使用两个类（PAR1和PAR2）。这是代码。它们应该并排，还是一个在另一个之上？您刚才链接的小提琴有相同的包装问题。。。。他们不适合坐在同一排，肩并肩。我确信我的朋友是这样编写脚本的，因为我看了教程视频，代码是相同的，但结果不同。我的代码和他之间的不同是gw使用外部CSS，而在教程中外部CSS没有被记录。链接教程视频。等等，我会上传它

<div class="box">
<div class="par1">
    <p>
    It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. 
    </p>
</div>

<div class="par1">
    <p>
    It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. 
    </p>
</div>

</div>

<style>
    .box{
        background-color: blue;
        border: 10px solid #000;
        height: 100%;
        width: 600px;
        margin: auto;
        overflow: hidden;
        padding:20px;
    }

    .par1{
        width: 50%;
        float: left;
        border: 1px solid #fff;
        margin: 1px;
    }

<div class="box">
<div class="par1">
    <p>
    It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. 
    </p>
</div>
<hr/>
<div class="par1">
    <p>
    It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. 
    </p>
</div>

</div>

    .box{
        background-color: blue;
        height: 100%;
        width: 600px;
        margin: auto;
        overflow: hidden;
        padding:20px;
    }

    .par1{
        width: 50%;
        float: left;
        text-align: justify;
    }
    .par1 p { padding:  5px;  border-right:
      1px solid white;
    }

    .par2
    {
        width: 50%;
        float: left;
        text-align: justify;
    }
    .par2 p { padding:  5px; 
      border-left: 1px solid white;
    }


<div class="box">
<div class="par1">
    <p>
    It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. 
    </p>
</div>
<div class="par2">
    <p>
    It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. 
    </p>
</div>