<!DOCTYPE html>を追加すると、配置が台無しになります

ダメダメダメ

<!DOCTYPE html>いくつかのプロジェクトに追加するのを忘れたので、戻って追加しました。これにより、いくつかの要素の配置/高さが台無しになりましたが、追加するpx%、欠落している場所を追加することで修正できました。

しかし、私のプロジェクトの1つでは、これで問題が解決しませんでした。これがフィドルです。コンテナ全体を埋めるのはボタンの高さです。がなくてもうまく機能し<!DOCTYPE html>ます。私は他の同様の質問を見ましたが、与えられたアドバイス(不足しているpxまたは追加%)は機能しませんでした。

ボタンのCSSは次のとおりです。

button {
    padding: 0px !important;
    margin: 0px !important;
    height: 15% !important;
    width: 25%;
    display: block;
    float: left;
    background-color: #F8B8B8;
    border: 1px solid #fee;
    border-bottom: none;
    border-left: none;
}
Sojtin

https://jsfiddle.net/tn3z9e6k/4/

.buttonrow { // created from #buttonrow
    width: 100%;
    padding: 0px;
    margin: 0px;
    height:calc(400px / 5); // total height / rows
}


button {
    padding: 0px !important;
    margin: 0px !important;
    height: 100% !important;
    width: 25%;
    display: block;
    float: left;
    background-color: #F8B8B8;
    border: 1px solid #fee;
    border-bottom: none;
    border-left: none;
}

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

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

編集
0

コメントを追加

0

関連記事

分類Dev

HTML 5Doctypeがレイアウトを台無しにする

分類Dev

<!DOCTYPE html>はhtmlタグですか?

分類Dev

doctype htmlを定義すると、divの高さが0ピクセルになります

分類Dev

<!DOCTYPE> html / template

分類Dev

Skip <!DOCTYPE html> with htmlAgilityPack

分類Dev

No doctype in an include with html/php

分類Dev

iframeを使用したHTML5Doctype

分類Dev

DOCTYPEのないHTMLコメント

分類Dev

<DOCTYPE html> を使用すると、Html ヘッダー要素が本文に表示される

分類Dev

HTML5の!doctypeが私のスタイルを台無しにしている

分類Dev

DOCTYPEに応じてHTML(画像)のレンダリングが異なります

分類Dev

<!DOCTYPE html PUBLIC ".....">および<!DOCTYPE html> in eclipse

分類Dev

Doctype html-その後にhtmlタグが必要ですか?

分類Dev

doctypeをXHTMLからHTML5に変更する

分類Dev

HTMLフラグメントのDoctypeを宣言することは意味がありますか?

分類Dev

HTMLのDoctype宣言でhttpsを使用できますか?

分類Dev

TinyMCEは周囲のhtml(doctype、html、bodyタグ)を取り除くことができますか?

分類Dev

(DOCTYPEを使用して)ページにHTMLコードを挿入する方法は?

分類Dev

すべてのファイルで<!DOCTYPE html>を使用する必要がありますか?

分類Dev

doctype htmlを追加すると、入力フィールドのCSSコードが正しくレンダリングされない

分類Dev

undefined:1 <!DOCTYPE html> ^ SyntaxError:予期しないトークン<node.js

分類Dev

FormatException:予期しない文字(文字1)<!DOCTYPE html> Flutter Google Sheets

分類Dev

HTML5要素はHTML5以外のDoctypeで「機能」しますか?

分類Dev

Beautifulsoup4を使用してHTMLからDoctypeを削除しますか?

分類Dev

SublimeText2でHTMLTidyを取得して、doctype / html / bodyの削除を停止します

分類Dev

予期しないトークン Doctype Html からエラーを受け取ります

分類Dev

Uncaught SyntaxError:Unexpected token <(from <!DOCTYPE html>)

分類Dev

DomparserのHTML5Doctype

分類Dev

Different rendering of HTML (images) depending on DOCTYPE

Related 関連記事

  1. 1

    HTML 5Doctypeがレイアウトを台無しにする

  2. 2

    <!DOCTYPE html>はhtmlタグですか?

  3. 3

    doctype htmlを定義すると、divの高さが0ピクセルになります

  4. 4

    <!DOCTYPE> html / template

  5. 5

    Skip <!DOCTYPE html> with htmlAgilityPack

  6. 6

    No doctype in an include with html/php

  7. 7

    iframeを使用したHTML5Doctype

  8. 8

    DOCTYPEのないHTMLコメント

  9. 9

    <DOCTYPE html> を使用すると、Html ヘッダー要素が本文に表示される

  10. 10

    HTML5の!doctypeが私のスタイルを台無しにしている

  11. 11

    DOCTYPEに応じてHTML(画像)のレンダリングが異なります

  12. 12

    <!DOCTYPE html PUBLIC ".....">および<!DOCTYPE html> in eclipse

  13. 13

    Doctype html-その後にhtmlタグが必要ですか?

  14. 14

    doctypeをXHTMLからHTML5に変更する

  15. 15

    HTMLフラグメントのDoctypeを宣言することは意味がありますか?

  16. 16

    HTMLのDoctype宣言でhttpsを使用できますか?

  17. 17

    TinyMCEは周囲のhtml(doctype、html、bodyタグ)を取り除くことができますか?

  18. 18

    (DOCTYPEを使用して)ページにHTMLコードを挿入する方法は?

  19. 19

    すべてのファイルで<!DOCTYPE html>を使用する必要がありますか?

  20. 20

    doctype htmlを追加すると、入力フィールドのCSSコードが正しくレンダリングされない

  21. 21

    undefined:1 <!DOCTYPE html> ^ SyntaxError:予期しないトークン<node.js

  22. 22

    FormatException:予期しない文字(文字1)<!DOCTYPE html> Flutter Google Sheets

  23. 23

    HTML5要素はHTML5以外のDoctypeで「機能」しますか?

  24. 24

    Beautifulsoup4を使用してHTMLからDoctypeを削除しますか?

  25. 25

    SublimeText2でHTMLTidyを取得して、doctype / html / bodyの削除を停止します

  26. 26

    予期しないトークン Doctype Html からエラーを受け取ります

  27. 27

    Uncaught SyntaxError:Unexpected token <(from <!DOCTYPE html>)

  28. 28

    DomparserのHTML5Doctype

  29. 29

    Different rendering of HTML (images) depending on DOCTYPE

ホットタグ

アーカイブ