浮动 div css 下的 margin-top

发布于 2024-09-09 22:11:55 字数 319 浏览 8 评论 0原文

我在 float:right div 下有一个 div。由于某种原因，上边距无法应用于第一个 div。这是 css

#over{
  width:80%;
  float:right;
  color:#e68200; 
 }

#under{
  clear:both;
  background:url(../images/anazitisi.png) no-repeat;  
  margin:10px auto; /*does not work!!!*/
  width:95px;
  height:20px;
 }

有谁知道发生了什么事吗？

原文

I have a div under a float:right div. For some reason, the top margin cannot be applied to the first div. here is the css

#over{
  width:80%;
  float:right;
  color:#e68200; 
 }

#under{
  clear:both;
  background:url(../images/anazitisi.png) no-repeat;  
  margin:10px auto; /*does not work!!!*/
  width:95px;
  height:20px;
 }

does anyone know what's going on?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

温馨耳语 2024-09-16 22:11:55

浮动的东西有点浮动在正常布局之外，所以通常不会影响其他不像它们那样浮动的东西。当然，不同浏览器中的浮动行为有所不同，但这是总体思路。

在浮动 div 之后，您需要一些东西（例如空 div）来清除浮动（有 style="clear:both;"）。

然而，正如我所说，浏览器的行为仍然会有所不同，具体取决于浏览器决定应从何处计算边距。当然有解决方法。有关详细信息，请参阅此页面。

回复收藏 0 原文

千纸鹤带着心事 2024-09-16 22:11:55

无需额外
的解决方案

您所看到的是折叠垂直边距的问题在 CSS3 中。随着CSS4的出现，这个问题将更容易得到解决。同时，添加额外的

不是一个好主意，尽管听起来很简单。通常最好将内容和表示严格分开。

以下是我在我的网站上解决此问题的方法。该解决方案利用了内联块内垂直边距折叠的缺失。

#under 应至少包含以下项目：

#under {
    clear: both;
    display: inline-block;
    width: 100%;
}

A solution without extra `<div>`

What you see, is the problem of collapsing vertical margins in CSS3. This problem will be more easily solved with the advent of CSS4. In the mean time, it is not a good idea to add an extra <div>, as easy as it may sound. It is generally better to keep content and presentation strictly separated.

Here is how I solved this issue on my website. The solution exploits the absence of vertical margin collapse inside inline blocks.

#under should contain at least the following items:

#under {
    clear: both;
    display: inline-block;
    width: 100%;
}

回复收藏 0 原文

骄傲 2024-09-16 22:11:55

试试这个 css snipe，我想这会解决你的问题。

  #over{
  width:80%;
  float:right;
  color:#e68200; 
  background-color:#234fdd;
  height:auto;
  margin-bottom:30px;
}

#under{
 clear:both;
 background:url(../images/anazitisi.png) no-repeat;  
 margin:auto;
 width:200px;
 height:20px;
 background-color:#23ffff;
}

try this css snipe, i think this will solve your problem.

  #over{
  width:80%;
  float:right;
  color:#e68200; 
  background-color:#234fdd;
  height:auto;
  margin-bottom:30px;
}

#under{
 clear:both;
 background:url(../images/anazitisi.png) no-repeat;  
 margin:auto;
 width:200px;
 height:20px;
 background-color:#23ffff;
}

回复收藏 0 原文

~没有更多了~