0

で画面の中央に配置されているdiv別の右側にa を配置したい。divmargin-left: auto; margin-right: auto;

最初のdivではなくラッパーを中央に配置するため、2つのdivを1つにラップしようとしてもうまくいかないようです。

何かご意見は？ありがとう！

これまでの私のcssコード：

#text {
width: 500px;
height: auto;
margin-left: auto;
margin-right: auto;
margin-top: 150px;
}

#image {
overflow: hidden;
float: right;
}
4

3 に答える 3

1

ありがとうございcssます。あなたも持っていますhtmlか？

divラッパーの外側を引っ張ってみてください。ポジショニングが機能するはずです。それでも問題が解決しない場合は、試してください

{position: absolute;}
于 2012-12-19T15:29:08.960 に答える
0

少しハックですが、これはうまくいくようです (少なくとも Chrome では)。

<div style="position:relative; width:50%; border:1px solid black; margin-left: auto; margin-right: auto;">
    centered text
    <div style="position:absolute; left:100%; top:-1px; width:50px; border:1px solid red">
        right text
    </div>
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

外側のposition: relative;属性divは、内側の div の絶対位置を外側の div に対して「相対的」にします。position: relative;内部で使用するだけで、div異なる結果が得られます (ただし、多少の努力で動作するようになる場合があります)。

内側divを に配置すると、内側left:100%;の左境界がdiv外側の右境界に移動しdivます。はtop:-1px;、外側の境界線を補正するために使用されていdivます。国境がない場合は、これtop:0px;で十分です。width内側のは、外側の幅のdivパーセンテージに設定できます。div

これをjsFiddleにドロップし、適切になるまで属性をいじることをお勧めします。また、選択したターゲット ブラウザでテストすることもできます。

于 2012-12-19T15:37:39.227 に答える
0

私が想像する最良の方法は、左のdivのマージンを使用して中央に配置し、2番目のdivを左にフロートさせて突き合わせることです。

<div style="position:relative;float:left;width:800px;margin:0 auto">
 <div style="position:relative;float:left;width:500px;margin:0 0 0 150px">
  This should go to the centre of the centred 800px div
 </div>
 <div style="position:relative;float:left;width:150px">
  This will be pushed up to the left of the centred 500px div
 </div>
</div>

これは「ハッキー」ではないと思います...

于 2013-02-27T14:04:17.690 に答える