2

3 つの div を並べてスタックする際に問題が発生しているようです。これを行う方法のコードとヒントを提供するいくつかの異なるページを調べましたが、何らかの理由で正しく表示されません. これは、私のページで使用している div コードと、スタイル シートからの div の情報です。誰かが私が間違っていることを修正してくれることを願っています。

私は本当に十分な情報を提供しなかったので、別の編集を行うことにしました.3つのdivが並んでいますが、それらはくっついているように見え、1つは異なっています.レイアウトの残りの部分と同じ高さに収まるように均等に配置したい. サイトへのリンクがあるので、私が持っているものを見ることができます

また、投稿の #t2 に # がありませんでした。コードで投稿を作成するときに誤って削除してしまいました。

<div id="testwrap">
    <div id="t1">left</div>
    <div id="t3">right</div>
    <div id="t2">middle</div>
</div>

#testwrap {
width: 933px;
margin-right: auto;
margin-left: auto;
}

#t1 {
width: 311px;
margin-right: auto;
margin-left: auto;
background-color: #FFF;
height: 220px;
margin-top: 20px;
margin-bottom: 20px;
float: left; width:311px;
padding: 10px;
}
 #t2 {
background-color: #FFF;
height: 220px;
width: auto;
padding: 10px;
margin-top: 20px;
margin-right: auto;
margin-bottom: 20px;
margin-left: auto;
}
#t3 {
background-color: #FFF;
height: 220px;
width: 311px;
margin-right: auto;
margin-left: auto;
margin-top: 20px;
margin-bottom: 20px;
width:311px;
float: right; width:311px;
padding: 10px;
}
4

3 に答える 3

0

t1 と t3 をフローティングしているため、結果としてドキュメント フローから除外されているようです。#t2 もフロートし、その幅を (auto ではなく) 結果のスペースに一致するように変更すると、動作するはずです。

#t2 {
    background-color: #000;
    height: 220px;
    width: 250px;
    padding: 10px;
    margin-top: 20px;
    margin-right: auto;
    margin-bottom: 20px;
    margin-left: auto;
    float:left;
}
于 2012-10-21T01:44:25.037 に答える
0

ここにきれいなコードがあります（あなたのコードはとても乱雑です）。これをコピーして HTML ドキュメントに貼り付けることができます。div の背景色を好みに合わせて変更するだけです。

http://jsfiddle.net/K3FJe/

HTML

<div id="testwrap">
    <div id="t1">left</div>
    <div id="t2">middle</div>
    <div id="t3">right</div>
</div>​

CSS

#testwrap {
    width: 933px;
    height: 280px;
    margin: 0 auto;
    background: black;
}

#t1, #t2, #t3 {
    height: 220px;
    padding: 10px;
    color: #FFF;
    float: left;
}

#t1 {
    width: 273px;
    margin: 20px 6px 20px 12px;
    background-color: red;

}

#t2 {
    width: 279px;
    margin: 20px 6px 20px 6px;
    background-color: blue;
}

#t3 {
    width: 273px;
    margin: 20px 12px 20px 6px;
    background-color: green;
}​

それらの間にスペースを空けて更新しましたが、これでうまくいくはずです。

于 2012-10-21T01:46:22.870 に答える
0

あなたが使用することができます：

#testwrap {
   display: table;
   [...]
}
#t1, #t2, #t3 {
   display : table-cell;
   width: 271px;
}

次に、フロートをすべて取り外します。

このようにして、すべての列が常に同じ高さになります。

于 2012-10-21T02:12:21.677 に答える