2

私はこれらのdivを持っています.1つは左に、もう1つは右に浮いていますが、それらは非常に離れているので、少し近づけたいので、マージンを設定しようとしましたが、うまくいきませんでした。誰でも助けてくれますか

ここにCSSがあります

.right{float:right; margin-left:-200px;}
.left{float:left;}

.date{
width:80px;
margin: 50px 90px 0px 200px;
padding: 0px 0px 0px 0px;
}

.entry {
margin: 0px 0px 0px 0px;
padding: 20px 0px 0px 0px;
border-bottom: 0px solid #cccccc;
    font-family:eurofurence;
    font-size:17px;
    width:610px;
    background:#000;
}
4

3 に答える 3

2

設定

 margin-right:200;

右用

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

このようなスタイルの位置と左または右の属性

.left{
  position:relative;
  float:left;
  left:100px;
 }

デモ

于 2012-10-02T05:44:27.027 に答える
1

このcssを試してください：

.left{ float:left;}

.right{float:left; margin-left:200px;}
于 2012-10-02T06:51:25.783 に答える
0

垂直マージンを持つ left-/right-floating 要素の現在の仕様にはバグがあることに注意してください: これらの垂直マージンは、そのすぐ上にある非浮動要素の垂直マージンに折りたたまれません。

一貫性がありません...そして、これらの垂直マージンの動作がブラウザー間で同じでない場合があります (正常に折りたたまれるものもあります)。

これにより、これらの浮動要素とそのすぐ横にある非浮動要素の垂直方向の配置が不均衡になります。

<div style="border:1px solid black;margin:10px">Non-floatting above.</div>
<div style="border:1px solid black;margin:10px;float:left">Floatting on the left.</div>
<div style="border:1px solid black;margin:10px;float:right">Floatting on the right.</div>
<div style="border:1px solid black;margin:10px">Non-floatting in the middle.</div>
<div style="border:1px solid black;margin:10px;clear:both">Non-floatting below.</div>

中央の 3 つのブロックが整列していないことに注意してください。左右の浮動ブロックは、中央の非浮動ブロックの 10 ピクセル下に予期せず配置されています...

ただし、下のブロック (「clear:both」を使用)は下にシフトされる可能性があります (ただし、このクリアはフロートの下マージンを無視しますが、これらのフローティング下マージンは、下の要素の上マージンの縮小に引き続き関与する可能性があります。

そのため、フロートの上マージンは期待どおりに機能しません。これらの非フローティング要素にも同じマージンが必要な場合、フロートが正しい上マージンを採用し、フロート以外の要素がすぐ横に配置されるように設計された非フローティング要素と一貫性のあるデザインを作成することはできません。 .

回避策は、親ブロックの中央の行にあるすべてのブロックを独自の垂直マージンを持つ親ブロックにカプセル化することです。中央のすべてのブロックには垂直マージンがあってはなりません。そして、これらすべてのフロートが行に収まらない場合、これは問題を引き起こします。一部は「ラップ」してマージンがなくなります!

唯一の回避策は、親ブロック内のすべての中央要素をマージンなしでカプセル化し、上下のコンテンツで垂直マージンの崩壊に参加しないことですが、中央のすべての要素はマージンを設定する必要があります。その場合、中央の行の垂直マージンを中央の行のすぐ上または下にある行の垂直マージンと正しく折りたたむことを許可する方法はありません。

<div style="border:1px solid black;margin:10px">Non-floatting above.</div>
<div style="position:relative">
  <div style="border:1px solid black;margin:10px;float:left">Floatting on the left.</div>
  <div style="border:1px solid black;margin:10px;float:right">Floatting on the right.</div>
  <div style="border:1px solid black;margin:10px">Non-floatting in the middle.</div>
  <div style="clear:both"></div>
</div>
<div style="border:1px solid black;margin:10px">Non-floatting below.</div>
于 2020-11-18T00:32:40.030 に答える