HTML 3つのセクションのコンテンツボックスを作成する

Question

コンテンツセクションにヘッダーと2つの垂直線を含むボックスを作成して、3つのセクションでボックスを作成しようとしています。私はまだHTMLの初心者であり、ボックスを完成させましたが、縦線を作る方法を理解することはできません。これは私が作るしようとしているものです：

私はボックス内の2本の垂直線を作成し、コンテンツに三つのセクションのそれぞれを埋めるために必要なすべての。誰かが私を助けたり、正しい方向を示してくれたら、私はそれを感謝します。恐ろしい写真を申し訳ありません。私はスクリーンショットからいくつかのものを取り除かなければなりませんでした。

Answer 1

これは動作します：

#container{ 
 
    width:100%; 
 
    height:100px; 
 
    border:1px solid black; 
 
} 
 
#header{ 
 
    width:100%; 
 
    background:grey; 
 
    height:20px; 
 
} 
 
.fourth{ 
 
    width:25%; 
 
    height:100px; 
 
    float:left; 
 
} 
 
.half{ 
 
    width:50%; 
 
    height:100px; 
 
    border-left:1px solid grey; 
 
    border-right:1px solid grey; 
 
    float:left; 
 
}

<div id="container"> 
 
    <div id="header"><div> 
 
    <div class="fourth"></div> 
 
    <div class="half"></div> 
 
    <div class="fourth"></div> 
 
</div>

Answer 2

は、次のペンを参照してください：http://codepen.io/rkieru/pen/JKyYpx

.line-navbar li { 
    display: inline-block; 
    border-right: 1px solid #ccc; 
    margin: 5px 0; 
} 

.line-navbar li:last-of-type { 
    border-right: none; 
} 

それは同様の縦線治療によるナビゲーションメニューの一例ですが、CSSがあなたのコンテンツボックスのデザインに簡単に適用されるべきです。唯一の注意点は、それらが最大の高さでボックスに適用されることを保証すること、またはコンテンツボックスがすべて同じ高さであることを保証することです。

Answer 3

によって写真あなたが探しているものはHTMLテーブルです。

例：

<table border="1" width="100%"> 
    <tr> 
    <th colspan="3">Headline</th> 
    </tr> 
    <tr> 
    <td>Content...</td> 
    <td>Content...</td> 
    <td>Content...</td> 
    </tr> 
</table> 

あなたはボックスのスタイルをCSSを使用することができます。

PD：次回はコードを示します。このようにして、あなたがしようとしていることをよりよく理解できるようになります。

Answer 4

テーブルを使用するように声を聞かないでください。 flexboxでこれを行うことができます。ここでは例です：

.header { 
 
    background-color: LightGrey; 
 
} 
 

 
.column-container { 
 
    display: -webkit-box; 
 
    display: -moz-box; 
 
    display: -ms-flexbox; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
} 
 

 
.column { 
 
    padding: 10px; 
 
    border-left: 1px solid black; 
 
} 
 

 
.column:first-child { 
 
    border-left: none; 
 
}

<div class="header"> 
 
    This is header text. 
 
</div> 
 
<div class="column-container"> 
 
    <div class="column"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ornare, sem sit amet ornare consequat, nunc turpis accumsan urna, ac hendrerit orci sapien eu purus. Proin blandit finibus eros, ut egestas urna aliquam eget. Integer hendrerit metus sed ligula lobortis, et scelerisque libero congue. Nunc facilisis tincidunt dictum. Nam aliquet ullamcorper nisl, ac congue leo pellentesque eget. Vestibulum dui massa, pretium at ex id, aliquet mattis ligula. Aenean ut porta elit. Donec pulvinar a augue non bibendum. Morbi pellentesque erat ut leo tincidunt condimentum. 
 
    </div> 
 
    <div class="column"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ornare, sem sit amet ornare consequat, nunc turpis accumsan urna, ac hendrerit orci sapien eu purus. Proin blandit finibus eros, ut egestas urna aliquam eget. Integer hendrerit metus sed ligula lobortis, et scelerisque libero congue. Nunc facilisis tincidunt dictum. Nam aliquet ullamcorper nisl, ac congue leo pellentesque eget. Vestibulum dui massa, pretium at ex id, aliquet mattis ligula. Aenean ut porta elit. Donec pulvinar a augue non bibendum. Morbi pellentesque erat ut leo tincidunt condimentum. 
 
    </div> 
 
    <div class="column"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ornare, sem sit amet ornare consequat, nunc turpis accumsan urna, ac hendrerit orci sapien eu purus. Proin blandit finibus eros, ut egestas urna aliquam eget. Integer hendrerit metus sed ligula lobortis, et scelerisque libero congue. Nunc facilisis tincidunt dictum. Nam aliquet ullamcorper nisl, ac congue leo pellentesque eget. Vestibulum dui massa, pretium at ex id, aliquet mattis ligula. Aenean ut porta elit. Donec pulvinar a augue non bibendum. Morbi pellentesque erat ut leo tincidunt condimentum. 
 
    </div> 
 
</div>