2

私は Html が初めてで、複数の div を横に並べて配置しようとしています。float プロパティと display inline プロパティも試しましたが、何も正しく動作しません。誰かがその方法を提案できますか?

私のコード:

#display2letter
{
width:150px;
height:50px;
background-color:grey;
box: 10px 10px 5px #888888;    
}
#display3letter
{
width:150px;
height:50px;
background-color:blue;
box: 10px 10px 5px #888888;
}
#display4letter
{
width:150px;
height:50px;
background-color:grey;
box: 10px 10px 5px #888888;
}

#one
{
position:fixed;
left:23%;
}
#two
{
position:fixed;
left:23%;
}
#three
{
position:fixed;
left:23%;
}

ここにフィドルがあります

http://jsfiddle.net/pGHS9/1/

4

4 に答える 4

3

私はJSFIDDLEを作成しました。それがあなたのメンションかどうかはわかりません。

ボックスを追加し、位置を相対に固定に変更しました:

.box {
    float: left;
    width: 270px;
}
#one
{
position:relative;
left:23%;
}
#two
{
position:relative;
left:23%;
}
#three
{
position:relative;
left:23%;
}

JSFIDDLE

于 2013-10-25T09:56:13.453 に答える
1

より推奨される解決策は、ディスプレイ付きのコンテナーを配置することです: inline-block およびブロックのパーセント。

このようなもの：

html

<div class="horizontal">
other elements
</div><div class="horizontal">
other elements
</div>

CSS

.horizontal {
  display:inline-block;
  width: 33%;
}

このソリューションはレスポンシブ デザインの実装です。

于 2013-10-25T09:51:51.830 に答える