左のフローティング列、右のフローティング列、中央にメイン コンテンツがある 3 つの div の div を作成しようとしているところに問題があります。これを行うためにできることを試してみましたが、これを思いつきました:
何らかの理由で、中央の div は、最初の列の終わりと右の列の終わりの間の中央にあり、右の列の始まりではありません。
<div id="main">
<div id="left">
<img src="/pic1.jpg" alt="Example work" height="250px" width="250px" />
<br />
<img src="/pic2.jpg" alt="Example work" height="250px" width="250px" />
</div>
<div id="content">
words
</div>
<div id="right">
<img src="/pic3.jpg" alt="Example work" height="250px" width="250px" />
<br />
<img src="/pic4.jpg" alt="Example work" height="250px" width="250px" />
</div>
</div>
CSS:
#main {
margin: 0 auto;
width: 80%;
}
#left {
float: left;
padding: 5px;
border: 2px ridge;
}
#right {
float: right;
padding: 5px;
border: 2px ridge;
}
#content {
text-align: center;
}
ここで何が起こっているかについてのアイデアはありますか?