0

7 つの正方形を 3 行で表示するインデックス ページを作成しようとしています。つまらないように聞こえますが、最終的にはかなりクールに見えると思われるjQueryのアイデアがいくつかあります。四角形に空の div を作成するとうまくいくと思い、すべての div のサイズ (高さと幅) を簡単に定義できるようにしました。問題: それらを表示できません。

この問題に関する他の多くの質問を読みましたが、修正は常に div の幅を定義することでしたが、これはうまくいきませんでした。基本的にはこのようにしたいので、これをテーブルとして設定することも検討しましたが、MDN は「レイアウトには推奨されません」と表示され、スナッフまでのコードを書きたいと思います。

私のコードを、codecademy の jQuery レッスンで見たコードの一部と比較しましたが、codecademy コードが正方形を表示し、私のコードが何も表示しないという実際の違いは見当たりません。この問題に対処し、私のビジョンをページにレンダリングする方法についてのヘルプや提案は素晴らしいでしょう! ありがとう。

html は次のとおりです。

<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Test Page</title>
        <link rel="stylesheet" type="text/css" href="styles/main.css">
</head>
<body>
<container class="row">
    <div class="sqtop"></div>
    <div class="sqtop"></div>
    <div class="sqtop"></div>
    <div class="sqtop"></div>
    <div class="sqtop"></div>
    <div class="sqtop"></div>
    <div class="sqtop"></div>
</container>
<container class="row">
    <div class="sqmid"></div>
    <div class="sqmid"></div>
    <div class="sqmid"></div>
    <div class="sqmid"></div>
    <div class="sqmid"></div>
    <div class="sqmid"></div>
    <div class="sqmid"></div>
</container>
<container class="row">
    <div class="sqbtm"></div>
    <div class="sqbtm"></div>
    <div class="sqbtm"></div>
    <div class="sqbtm"></div>
    <div class="sqbtm"></div>
    <div class="sqbtm"></div>
    <div class="sqbtm"></div>   
</container>
</body>
</html>

そしてCSS：

body {
background-color: gray;
height: 100%;
width: 100%;
}
.row {
width: 600px;
height: 100px;
padding: 1em;
text-align: center;
}
.sqtop {
height: 20px;
width: 20px;
min-height: 10px;
min-width: 10px;
color: black;
background-color: yellow;
border-radius: 5px;
position: absolute;
display: inline-block;
vertical-align: middle;
}
4

3 に答える 3

0

問題は、スタイリングを にのみ適用していることですsqtop。これを試して：

body {
background-color: gray;
height: 100%;
width: 100%;
}
.row {
padding: 1em;
text-align: center;
    overflow: hidden;
}
.row>div {
height: 20px;
width: 20px;
color: black;
background-color: yellow;
border-radius: 5px;
vertical-align: middle;
    display: inline-block;
}

http://jsfiddle.net/keurr/1/

于 2013-11-14T22:03:24.677 に答える
0

絶対配置がレイアウトを台無しにしています。基本的に、すべての div には絶対位置があるため、それらはすべて重なり合って表示されます。

もう 1 つの問題は、行の 1 つだけをスタイリングしていて、他の 2 つには CSS 属性が関連付けられていないことです。

CSSの修正は次のとおりです。

本体 { 背景色: グレー; 高さ: 100%; 幅: 100%; } .row { 幅: 600px; 高さ: 100px; パディング: 1em; テキスト整列: 中央; } .sqtop、.sqmid、.sqbtm { 高さ: 20px; 幅: 20px; 最小高さ: 10px; 最小幅: 10px; 色: 黒; 背景色: 黄色; 表示: インラインブロック; ボーダー半径: 5px; 垂直整列: 中央; }

ただし、これですべての問題が解決するわけではありません。ボックスはまだ列に並んでいる必要があります。div は改行がどこにあるべきかを正確に認識していないため、HTML に改行を作成する div を追加できます。これは次のようになります。

<container class="row">
    <div class="sqtop"></div>
    <div class="sqtop"></div>
    <div class="sqtop"></div>
    <div class="sqtop"></div>
    <div class="sqtop"></div>
    <div class="sqtop"></div>
    <div class="sqtop"></div>
</container>
<div style="clear:both"></div>
<container class="row">
    <div class="sqmid"></div>
    <div class="sqmid"></div>
    <div class="sqmid"></div>
    <div class="sqmid"></div>
    <div class="sqmid"></div>
    <div class="sqmid"></div>
    <div class="sqmid"></div>
</container>
<div style="clear:both"></div>
<container class="row">
    <div class="sqbtm"></div>
    <div class="sqbtm"></div>
    <div class="sqbtm"></div>
    <div class="sqbtm"></div>
    <div class="sqbtm"></div>
    <div class="sqbtm"></div>
    <div class="sqbtm"></div>   
</container>

これにより、7 div の 3 行が得られます。

于 2013-11-14T22:06:47.603 に答える