フルハイトボーダー-float:leftを使用したdivの右側

bsbak

フルハイトの境界線が必要です-float:leftCSSを使用した最初と2番目のdivの右側

div.wrapper {
    border: 1px solid black;
}
div.wrapper > div {
    text-align: center;
    width: 50px;
    padding-left: 5px;

    float: left;
}
div.w-1, div.w-2 {
    border-right: 1px solid black;
}

HTML:

   <div class='wrapper'>
        <div class='w-1'>
            <p>text</p>
        </div>
        <div class='w-2'>
            <p>text</p>
            <p>text</p>
        </div>
        <div class='w-3'>
            <p>text</p>
            <p>text</p>
            <p>text</p>
        </div>
        <br style='clear: both;'>
    </div>

解決を手伝ってください。ここにjsfiddleがありますhttp://jsfiddle.net/kto5pupz/

ニケットタパ

HTML

<div class='wrapper'>
    <div class='w-1'>
        <p>text</p>
    </div>
    <div class='w-2'>
        <p>text</p>
        <p>text</p>
    </div>
    <div class='w-3'>
        <p>text</p>
        <p>text</p>
        <p>text</p>
    </div>
    <br style='clear: both;'>
</div>

CSS

div.wrapper {
    border: 1px solid black;
    overflow: hidden;
}
div.wrapper > div {
    text-align: center;
    width: 50px;
    padding: 0 0 9999px 5px;
    float: left;
    border-left: 1px solid black;
    margin: 0 0 -9999px;
}
div.wrapper > div:first-child{
    border: none;
}

フィドルへのリンク

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

divを使用してWebページの分割を左側または右側に揃える適切な方法

分類Dev

フレックスボックスを使用したスクロール可能なフルハイトdiv

分類Dev

SWRevealViewControllerを使用した右側の2つのパネル

分類Dev

React Native:高ピクセル密度デバイスでのハーフピクセルボーダーの問題

分類Dev

SwiftUI:macOSTextFieldから「フォーカスリング」ハイライトボーダーを削除

分類Dev

Bootstrapを使用して右側にコンテンツdivがある左側のサイドバー

分類Dev

フルボーダートライアングルdivを作成する

分類Dev

cssを使用したテキスト段落の左側と右側の角度の形状のボックス

分類Dev

Bootstrap4.0-画像+ナビゲーションバー+フルハイトボディのレスポンシブヘッダー

分類Dev

カットイン円形ホールスウィフトのボーダー

分類Dev

Angularprimengフルカレンダーハンドルイベントの変更日

分類Dev

li要素にフルハイトの左ボーダーを追加するにはどうすればよいですか?

分類Dev

cssファイルを使用したJavaFX TitledPaneダブルボーダー

分類Dev

jQueryUIスライダーのハンドルの右側の背景色を変更します

分類Dev

AZcliはハイフンで始まるキーボールトにシークレットを追加します

分類Dev

Pythonのテキストファイルからのリーダーボード

分類Dev

フルハイトボーダー?

分類Dev

divの右側にテキストをフロートします

分類Dev

検索バーを div の右側の中央に配置します。

分類Dev

vuejsを使用して、コンテナーの右側にあるフォルダーのすべてのファイルを一覧表示します

分類Dev

フレックスボックスを使用してフルハイトページで垂直方向に整列

分類Dev

ハイチャートはBootstrap3モーダルボディに適合しません

分類Dev

右側に閉じるボタンを押したまま、テキストをdivの中央に配置する

分類Dev

divタグを使用した完璧な水平方向にスクイーズされたダイヤモンドフローチャートシンボル

分類Dev

ブートストラップモーダルダイアログのデフォルトボタン

分類Dev

フロートの右側のDivが水平スクロールを引き起こしています

分類Dev

ファイルローダーを使用したWebpackハンドルバー画像の読み込み

分類Dev

JavaScriptを使用したCSVファイルからのハイチャート

分類Dev

フレックスダッシュボードとリーフレットとマーカーはハイチャートでクリックします

Related 関連記事

  1. 1

    divを使用してWebページの分割を左側または右側に揃える適切な方法

  2. 2

    フレックスボックスを使用したスクロール可能なフルハイトdiv

  3. 3

    SWRevealViewControllerを使用した右側の2つのパネル

  4. 4

    React Native:高ピクセル密度デバイスでのハーフピクセルボーダーの問題

  5. 5

    SwiftUI:macOSTextFieldから「フォーカスリング」ハイライトボーダーを削除

  6. 6

    Bootstrapを使用して右側にコンテンツdivがある左側のサイドバー

  7. 7

    フルボーダートライアングルdivを作成する

  8. 8

    cssを使用したテキスト段落の左側と右側の角度の形状のボックス

  9. 9

    Bootstrap4.0-画像+ナビゲーションバー+フルハイトボディのレスポンシブヘッダー

  10. 10

    カットイン円形ホールスウィフトのボーダー

  11. 11

    Angularprimengフルカレンダーハンドルイベントの変更日

  12. 12

    li要素にフルハイトの左ボーダーを追加するにはどうすればよいですか?

  13. 13

    cssファイルを使用したJavaFX TitledPaneダブルボーダー

  14. 14

    jQueryUIスライダーのハンドルの右側の背景色を変更します

  15. 15

    AZcliはハイフンで始まるキーボールトにシークレットを追加します

  16. 16

    Pythonのテキストファイルからのリーダーボード

  17. 17

    フルハイトボーダー?

  18. 18

    divの右側にテキストをフロートします

  19. 19

    検索バーを div の右側の中央に配置します。

  20. 20

    vuejsを使用して、コンテナーの右側にあるフォルダーのすべてのファイルを一覧表示します

  21. 21

    フレックスボックスを使用してフルハイトページで垂直方向に整列

  22. 22

    ハイチャートはBootstrap3モーダルボディに適合しません

  23. 23

    右側に閉じるボタンを押したまま、テキストをdivの中央に配置する

  24. 24

    divタグを使用した完璧な水平方向にスクイーズされたダイヤモンドフローチャートシンボル

  25. 25

    ブートストラップモーダルダイアログのデフォルトボタン

  26. 26

    フロートの右側のDivが水平スクロールを引き起こしています

  27. 27

    ファイルローダーを使用したWebpackハンドルバー画像の読み込み

  28. 28

    JavaScriptを使用したCSVファイルからのハイチャート

  29. 29

    フレックスダッシュボードとリーフレットとマーカーはハイチャートでクリックします

ホットタグ

アーカイブ