ページを境界線付きの2つの垂直および境界線セクションに分割する

現在、ページを2つの境界線と1つの境界線を持つ垂直断面に分割しようとしています。問題は、幅が49vwのセクションが2つあることです。境界線のサイズは1vwで100vwになりますが、セクションはインラインではなく互いに下にジャンプします。私はJSfiddleを設定しましたので、簡単に表示できます。 JSfiddleを使用するコードを紹介します。ページを境界線付きの2つの垂直および境界線セクションに分割する

HTML：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<link rel="stylesheet" href="css/reset.css" media="screen" type="text/css" /> 
<link rel="stylesheet" href="css/styles.css" media="screen" type="text/css" /> 
</head> 
<body> 
<!--SECTION 1--> 
    <div class="section1"> 
     <p>2D</p> 
    </div> 
<!--SECTION 2--> 
    <div class="section2"> 
     </p>3D</p> 
    </div> 
</body> 
</html>

CSS：

.section1{ 
    background-color:#11181e; 
    width:49vw; 
    float:left; 
    height:100vh; 
    border-right: 1vw solid #F5E5D6; 
    margin:0; 
    padding:0; 
} 
.section2{ 
    background-color:#f1c40f; 
    width:49vw; 
    float:left; 
    height:100vh; 
    border-left: 1vw solid #000; 
    margin:0;

ここでは、リンクがある：あなたの助けのためのhttp://jsfiddle.net/VfTYs/4/

感謝。

出典

2017-02-15 Animalovsky

および.section2については、width: 50%;およびbox-sizing: border-boxを使用してください。

body{ 
 
\t color:#fff; 
 
\t font-size:100pt; 
 
} 
 
.section1{ 
 
\t background-color:#11181e; 
 
\t width:50%; 
 
\t float:left; 
 
\t height:100vh; 
 
\t border-right: 1vw solid #F5E5D6; 
 
    box-sizing: border-box; 
 
    margin:0; 
 
    padding:0; \t 
 
} 
 
.section2{ 
 
\t background-color:#f1c40f; 
 
\t width:50%; 
 
\t float:left; 
 
\t height:100vh; 
 
\t margin:0; 
 
\t padding:0; 
 
    box-sizing: border-box; 
 
}

<div class="section1"> 
 
2d 
 
</div> 
 
<div class="section2"> 
 
3d 
 
</div>

出典

2017-02-15 19:16:39 Jesse

私も.section2' '上の黒い境界線を削除しました。 – Jesse

すばらしい、ありがとう。 – Animalovsky

問題はありません、あなたのプロジェクトに幸運！私があなたの質問に答えたら、緑のチェックマークを私に投げかけてください。 – Jesse

ページを境界線付きの2つの垂直および境界線セクションに分割する

答えて

関連する問題