用边框分开两个段落

Question

请给我一个简单的问题，但对像我这样的新手很困惑，努力打破这个问题。我试过桌面和Android，但它仍然得到相同的结果。

我有这样的代码

`

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

</style>

<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>

`

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

Answer 1

https://jsfiddle.net/2msLuda6

盒子的宽度为50％+每边1px边缘+每边1px边框。所以每个盒子都是50％+ 4px ...这就是为什么它包装到一个新的线上。

box-sizing: border-box;将包含50％的边框大小，您只需要不使用边距。

Answer 2

    .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>

Answer 3

您可以在段落之间添加 <ion-row> <ion-col> <ion-item [ngClass]="{'error-border':!myForm.controls.telephone.valid && myForm.controls.telephone.touched}"> <ion-label fixed>Contact</ion-label> <ion-input maxlength="10" type="tel" placeholder="0124037337" text-right formControlName="telephone" [{ngModal}]="telHere"></ion-input> </ion-item> <ion-item *ngIf="myForm.controls.telephone.hasError('required') && myForm.controls.telephone.touched"> <p>This Field is Required !! </p> </ion-item> <ion-item *ngIf="myForm.controls.telephone.hasError('pattern') && myForm.controls.telephone.touched"> <p>Only Number is Allowed !! </p> </ion-item> <ion-item *ngIf="myForm.controls.telephone.hasError('minlength') && myForm.controls.telephone.touched"> <p>Telephone Number is Invalid !! </p> </ion-item> </ion-col> </ion-row> 元素。

代码：

<hr/>

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