2

こんにちは、ウェブサイトをテーブルから div に変更するのに助けが必要です

私の問題は、私のウェブサイトにはインラインで 3 つの div が必要です。ページの中央に div が必要です中心は同じサイズを維持する必要があり、解像度に関係なくページの中心に留まる必要があります。これはdivを使用して可能ですか？

4

5 に答える 5

3

これはもちろん可能です。float (http://www.w3schools.com/css/css_float.asp) と背景画像 (http://www.w3schools.com/cssref/pr_background-image.asp) を見ることをお勧めします。 )

背景画像を設定するには:

<div style="background-image:url('location/image.ext');">

背景の繰り返しをチェックしてください: http://www.w3schools.com/cssref/pr_background-repeat.asp

3列のレイアウトの例については、ネット上にたくさんありますが、ここにある単純なものです: http://www.electrictoolbox.com/basic-3-column-fixed-width-css-layout/

    <div id="container">

    <div id="left">
    </div>

    <div id="right">
    </div>

    <div id="content">
    </div>

    <div class="clear"></div>

    <div id="footer">
    </div>

</div>

#container {
    width: 700px;
}

#left {
    float: left;
    width: 150px;
}

#content {
    padding: 0 210px 0 160px;
}

#right {
    float: right;
    width: 200px;
}

.clear {
    clear: both;
}
于 2012-12-29T20:53:12.527 に答える
0

http://matthewjamestaylor.com/blog/perfect-3-column.htmをチェックしてください

中央の列を％ではなく固定幅（px）に設定する必要があります。

于 2012-12-29T22:31:52.330 に答える
0

あなたが望むもの（中心が固定された液体側）は、この他のSO投稿ですでに回答されています：

3 カラム レイアウト: 流動的なサイド カラムを備えた固定幅の中央

于 2012-12-29T22:09:35.797 に答える
0

そのようなことを意味しましたか？
http://jsfiddle.net/UY5XY/5/

<div id="containter">
    <div id="left">LEFT</div>
    <div id="center">CENTER</div>
    <div id="right">RIGHT</div>
</div>

CSS:

#containter div {
    position:relative;
    text-align:center;
    width:100%;
    height:auto;
}
#containter div {
    position:absolute;
    text-align:left;
    width:100px;
    height:100px;
    display:block;
}
#left {
    left:0;            
}
#center {
    width:10%;
    margin:0 40%;
}
#right {
    right:0;   
}

-> IE の場合は text-align (問題ないはずです)
-> マージン: 左と右は 0
です -> 中央のマージンはパーセント値ですが、たとえば 50px ですが、'margin: 0 50px' のように中央マージンも作成する必要があります。

于 2012-12-29T22:48:39.863 に答える
0

あなたはこれを試すことができます...

divごとに個別のIDを持ち、パーセンテージの代わりに値にピクセルを使用してみてください...そして位置を相対または固定として使用してください...ブラウザが縮小されても変化しないように...

例えば。たとえば、中央の div の ID が #center_div であるとします...次に、これを試してください...

#center_div{
position:relative (or fixed);
width: (value)px;
height: (value)px;
display: block;
}

中央の div を他の 2 つの div の上に表示する場合は、z-index プロパティを使用するだけです...

それがうまくいくことを願っています...

于 2012-12-29T21:02:03.363 に答える