小さな女の子は div レイアウトの問題を解決するために専門家に助けを求めています~よろしくお願いします! _html/css_WEB-ITnose

本身是可以按照一排四个div排列的，自动换行。如下图：

可是当我给div加了name属性，是为了选取数据库中我需要的数据。就无法正常排列了，div宽度被无视，也不自动换行，变成了这幅样子。。。。。


css代码如下：

.carre
{
text-align: center;
display: inline-block;
vertical-align: top;
height: 150px;
width: 150px;
margin: 20px;
background-color: #FFFFFF;
float: left;
box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.2);
border-color: #FFFFFF;
color:#FF9999;
font-family: georgia;
}

php选取数据库如下：
d3c5d84d962a08519c22c5fb5f7b4dd7
    0c6dc11e160d3b678d68754cc175188a
    0c6dc11e160d3b678d68754cc175188a
    3f7b3decd2dcafb07b84d2d3985d9f40{$row['Critere']}0f6dfd1e3624ce5465eb402e300e01ae 
16b28748ea4df4d9c2150843fecfba68 eof;＆gt; style.display == "none"){
for(i=0;i {
div_array1[i].style.display = "" }
document.getElementById("all"; ).style .display="none";
document.getElementById("1").style.backgroundColor="#a6e5e0";
}else{
for(i=0;i {
div_array1[ i].style.display = "none";
}
document.getElementById("1").style.backgroundColor="#FF9999";



ディスカッションへの返信 (解決策)

carre スタイルの width 属性をオーバーライドする他のスタイルがあるはずです。

すべての CSS 投稿はここにあります

どのブラウザとバージョンを使用していますか? div を右クリックして「要素の検査」を選択するか、F12 キーを押して開発者ツールを開き、div の CSS スタイル表示およびその他の属性が設計したものと同じかどうかを確認します。

これを少し改善することができます。PHP を使用してデータを印刷し、それを JSON 形式でページに転送し、JS を使用して JSON データを受信し、それを HTML 形式にします。出力タグは標準的な記述方法ではありません。 。データを出力するだけです。
デバッグ ツールを使用して、スタイル内の特定のエラーを確認できます

carre スタイルの width 属性をカバーする他のスタイルがあるはずです。

すべての CSS ステッカーはここにあります

ただし、名前を使用しない場合は正常に表示されます。始めたばかりなので、文章が乱雑で標準に達していないかもしれません。アドバイスをいただければ幸いです~

CSSは次のとおりです:
table
{
border: none;
border-width: 2px; : オプティマ;

}

tr
{
ボーダー左: なし;
ボーダー色: 白;
td
; : なし;
ボーダー色: 白;
フォントサイズ: 16px;

td:hover{
背景色: #a6e5e0;
th
{
テキスト - 整列: 中央;
ボーダー幅: 2px;

脇
{
位置: 相対;
余白: 30px;
高さ: 1270px;
マージン: 左;
背景色: #FF9999;
2px 1px rgba(0, 0, 0.2); , 脇
{
表示: インライン;
テキスト整列: 中央;
.container2, 脇
{
表示: インライン;
テキスト整列:
}
.carre
{
テキスト整列: センター;
垂直整列: 上;
幅: 20 ピクセル; : #FFFFFF;
フロート: 左 ;
ボックスシャドウ: 0 1px 2px 1px rgba(0, 0, 0, 0.2);
フォントファミリー: #FF999;
}

.container1{
位置: 相対;
フレックスフロー: 行;
高さ: 100%;
ボックスシャドウ: 0 1px 2px 1px rgba( 0, 0, 0.2) ;
マージン-ボトム: 0;

.container2{
位置: フレックス;
マージン-下部: 0;
}
html, body
{
margin:0;
text-align: center;


body
{
text-align: center;
。ラッパー
{
width: 1050px;
margin: 0 auto;
height:100%;


使用しているブラウザとバージョンは何ですか? div を右クリックして「要素の検査」を選択するか、F12 キーを押して開発者ツールを開き、div の CSS スタイル表示およびその他の属性が設計したものと同じかどうかを確認します。


chromeを使用していると、ネームタグを追加した後に行を折り返せないという問題が発生しました。合計が 3 つある場合は 3 つ続けて、8 つある場合は 8 つ続けてください。 。 。
8つ並べると自動的に div.carre 63px * 150px になります


これをさらに改良して、PHP を使用してデータを印刷し、JSON 形式を使用してページに転送し、JS を使用して JSON を受信することもできますデータを HTML でフォーマットする場合、出力タグは標準以外の方法で記述されます。データを出力するだけです。
スタイルの特定のエラーを確認するには、デバッグ ツールを使用できます


初心者なので、独学で練習しながら書いていますが、書き方が標準的ではないかもしれませんが、アドバイスをいただければ幸いです。
あなたが話している方法がよくわかりませんが、データを直接出力するために div を出力すべきではないということですか？具体的な方法が分かりません。 。 。もっと具体的に、または例を挙げていただけますか?ありがとう！


Chrome では、f12 キーを押して要素のスタイルを表示します。
スタイルを上書きする必要があります~

スタイルに display: flex; と flex-flow: row; があるため、これら 2 つの文の機能はすべての要素を 1 行に配置することです。
rrree

が使用している Chrome に切り替えると、名前タグを追加した後に行を折り返せないことが問題であることがわかりました。合計が 3 つある場合は 3 つ続けて、8 つある場合は 8 つ続けてください。 。 。
8回並べると自動的にdiv.carre 63px * 150pxになります

Chromeではf12を押して要素のスタイルを表示します。
スタイルは上書きされるはずです~

うわー、うまくいきました!素晴らしい、ありがとう、神様〜
望んでいた効果を達成するためにチェックしながら書いただけなので、各文の意味を完全には理解していませんでした。まだまだ体系的に勉強する必要がありそうです。

display: flex については、Css3-flexbox を参照してください。デフォルトは nowrap であるため、既存のスタイルを自動的にラップすることもできます。
Flex には 3 つのバージョンがあり、レイアウトに非常に便利です。ただし、IE は初期の IE10 で部分的にしかサポートされておらず、XP ユーザーの場合、最高レベルは IE8 までしかアップグレードできないため、互換性はあまり良くありません。

スタイルに display: flex; と flex-flow: row; があるため、これら 2 つの文の機能はすべての要素を 1 行に配置することです。
rrree

が使用している Chrome に切り替えると、名前タグを追加した後に行を折り返せないことが問題であることがわかりました。合計が 3 つある場合は 3 つ続けて、8 つある場合は 8 つ続けてください。 。 。
8回並べると自動的に div.carre 63px * 150px になります

スタイルにdisplay: flex; と flex-flow: row; があるので、これらの2つの文の機能はすべての要素を配置することです。ずらっと並んで。
rrree

が使用している Chrome に切り替えると、名前タグを追加した後に行を折り返せないことが問題であることがわかりました。合計が 3 つある場合は 3 つ続けて、8 つある場合は 8 つ続けてください。 。 。
8回並べると自動的に div.carre 63px * 150px になります

わー、うまくいきました！素晴らしい、ありがとう、神様〜
望んでいた効果を達成するためにチェックしながら書いただけなので、各文の意味を完全には理解していませんでした。まだまだ体系的に勉強する必要がありそうです。
間違った人に返信してしまいました。 。 。ああ、私の頭はあまりうまく働いていません（笑）。 。 。

上記のように、jQuery などのクラス ライブラリを使用する場合は、それを考慮すると、

    display: -moz-inline-stack;    display: inline-block;    zoom: 1;    *display: inline;

などの操作が便利になります。ここではクライアントの例を示します。名前はもう必要ありません。ノード要素はクラス

    display: -moz-inline-stack;    display: inline-block;    zoom: 1;    *display: inline;

を通じて直接取得できます。すごい、うまくいきました。素晴らしい、ありがとう、神様〜

望んでいた効果を達成するためにチェックしながら書いただけなので、各文の意味を完全には理解していませんでした。まだまだ体系的に勉強する必要がありそうです。
間違った人に返信してしまいました。 。 。ああ、私の頭はあまりうまく働いていません（笑）。 。 。

display: flex については、Css3-flexbox を参照できます。デフォルトは nowrap であるため、既存のスタイルを自動的にラップすることもできます。

Flex には 3 つのバージョンがあり、レイアウトに非常に便利です。ただし、IE は初期の IE10 で部分的にしかサポートされておらず、XP ユーザーの場合、最高レベルは IE8 までしかアップグレードできないため、互換性はあまり良くありません。

スタイルに display: flex; と flex-flow: row; があるため、これら 2 つの文の機能はすべての要素を 1 行に配置することです。
rrree

が使用している Chrome に切り替えると、名前タグを追加した後に行を折り返せないことが問題であることがわかりました。合計が 3 つある場合は 3 つ続けて、8 つある場合は 8 つ続けてください。 。 。
8回並べると自動的に div.carre 63px * 150px になります

マスター、文の表示を説明してもらえますか: -moz-inline-stack?オンラインではこれ以上明確な情報が見つかりませんでした。
参考: クロスブラウザーのインラインブロック

Firefox 2 はインラインブロックをサポートしていませんが、インラインブロックに似た Mozilla の独自の表示属性 '-moz-inline-stack' をサポートしています。これを表示: inline-block の前に追加します。FF2 は inline-block を認識しないため、inline-block を無視し、-moz-inline-stack を保持します。 inline-block をサポートするブラウザは inline-block を使用し、以前の表示属性を無視します。

マスター、文の表示を説明してもらえますか: -moz-inline-stack?オンラインではこれ以上明確な情報が見つかりませんでした。