0

私はCSSを使用してdivを別のdivの隣にフロートさせています。このdivは、ユーザーが自分の「ビジネス」を見ている場合にのみ表示されます。何もクリアしないと、これらのdivと次のdivの間に大きなスペースが表示されます。フロートをクリアすると、次のdivのテキストが左にプッシュされます。フロートとクリアの使い方を誤解していると思います。私はCSSがあまり得意ではありません。

「fs」divを破棄せずにスペースを削除するにはどうすればよいですか？

これが何が起こっているかを示す写真です：

写真1

写真2

CSSとHTMLのコードは次のとおりです。

div.stuff {
    border-bottom:dotted 1px;
    border-left:dotted 1px;
    border-right:dotted 1px;
    border-top:dotted 1px;
    padding:10px;
    margin:10px;
    width:35%;
    height:65px;
    border-radius: 5px;
}
div.container {
    border-bottom:dotted 1px;
    border-left:dotted 1px;
    border-right:dotted 1px;
    border-top:dotted 1px;
    padding:10px;
    padding-left:25px;
    margin-bottom:10px;
    position:relative;
    height:65px;
    width:45%;
    top:-97px;
    right:10px;
    border-radius: 5px;
    overflow: hidden;
    float:right;
    clear:right;
}
div.fs {
    border-style:double;
    text-align:center;
    padding:10px;
    margin:10px;
    margin-left:20%;
    width:60%;
    border-radius: 5px;
}

<div class=stuff>
    <img src=/economy/images/cash.png> Cash on Hand: 10,245<br>
    <img src=/economy/images/worker.png> Workers Employed: 6<br>
    <img src=/economy/images/machine.png> Machines Leased: 4
</div>
<div class=container>
    <a href="/economy.php?section=business&do=contribute">Click Here to Manage Cash on Hand.</a><br>
    <a href="/economy.php?section=business&do=moderate">Click Here to Manage this Business.</a><br>
    <a href="/economy.php?section=business&do=info&action=disband&id=7">Click Here to Disband this Business.</a>
</div>
<br>
<div class=fs><a href=/economy.php?section=fs&id=7>Historical Financial Statements</a></div>
4

3 に答える 3

0

おそらくこれ：

div.container {
   border-bottom:dotted 1px;
   border-left:dotted 1px;
   border-right:dotted 1px;
   border-top:dotted 1px;
   padding:10px;
   padding-left:25px;
   margin-bottom:10px;
   position:relative;
   height:65px;
   width:45%;
   /*top:-97px;*/
   margin-top:-97;
   right:10px;
   border-radius: 5px;
   overflow: hidden;
   float:right;
   /*clear:right;*/
}
于 2012-05-26T08:05:53.590 に答える
0

左手を浮かせて、下のでdiv使う必要があります。このjsFiddleにいくつかの変更を加えました。clear:bothdiv

于 2012-05-26T08:14:10.067 に答える
0

div.stuff私はあなたを左に、あなたを右に浮かせて、要素div.containerに使用clear: bothしdiv.fsます。これを説明するために小さなフィドルを作りました。このフィドルでは、わかりやすくするためにラッパークラスを追加しました。ここでmin-width、ブラウザウィンドウのサイズが変更されたときに、右側のdivが1行下に浮かないようにを設定しました。やってみよう！

CSSは次のとおりです。

div.stuff {
    border: 1px dotted black;
    padding:10px;
    margin:10px;
    width:35%;
    height:65px;
    border-radius: 5px;
    float: left;
}
div.container {
    border: 1px dotted black;
    padding:10px;
    padding-left:25px;
    margin-bottom:10px;
    position:relative;
    height:65px;
    width:45%;
    margin: 10px;
    border-radius: 5px;
    overflow: hidden;
    float:right;
}
div.fs {
    clear: both;
    border-style:double;
    text-align:center;
    padding:10px;
    margin:10px;
    margin-left:20%;
    width:60%;
    border-radius: 5px;
}​
于 2012-05-26T08:14:35.273 に答える