我正在使用CSS将div放在另一个旁边。仅当用户正在查看他们自己的“业务”时才会显示此div。当我没有清除任何东西时,这些div和下一个div之间会出现很大的空间。当我清除浮动时,下一个div中的文本被推到左侧。我想我误解了如何使用浮动和清除。我对CSS不是很了解。
如何在不破坏“fs”div的情况下删除空间?
以下是展示正在发生的事情的图片:
这是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>
答案 0 :(得分: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;*/
}
答案 1 :(得分:0)
您需要浮动左手div
,并使用底部clear:both
上的div
。我在this jsFiddle做了一些更改。
答案 2 :(得分:0)
我会将您的div.stuff
向左移动,将div.container
向右移动,然后在clear: both
元素上使用div.fs
。我做了一个小fiddle来说明这一点。在这个小提琴中,为了清晰起见,我添加了一个包装类,我设置了一个min-width
,以防止右侧div在浏览器窗口调整大小时向下浮动一行。试试吧!
这是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;
}