为什么带浮点的div：right不尊重下面hr标签的边距？ [英] Why a div with float: right does not respect the margin of the hr tag below?

问题描述

我使用的是twitter-bootstrap框架，我试图把一些文本对齐到右边，一些文本与左边对齐（全部在同一行）。

这里是小提琴： http：/ $ b

 < div class =inlineb> Hello< / div> 
< div class =floatr inlineb> 
< input type =textclass =form-control inlineb> cm 
< / div> 
< hr> 
< button class =btn btn-primary> Hello stackoverflow< / button> 
  

CSS

  hr {
 margin：30px 0px 30px 0px; 
 border-color：red; 
} 
 body {
 padding：30px; 
} 
 .form-control {
 width：100px; 
} 
 .floatr {
 float：right; 
} 
 .inlineb {
 display：inline; 
} 
  

但是，如您所见，包含<$如果我使用 float：right ，那么c $ c> hr 标记并不尊重设置为hr的边距（margin-top：30px） C>。但如果我不使用这个属性，它会尊重它。看到它： http://jsfiddle.net/2gu29/9/

为什么我的解决方案不起作用？你能给我一个范例吗？你有另一种方法吗？

任何提示，建议或帮助将不胜感激，如果您需要更多信息，请告诉我，我将编辑。

解决方案

float CSS属性指定一个元素应该从正常流中获取，

如果您从该容器的左侧或右侧放置文本和内联元素， MDN Float文档您可以理解，只要我们应用 float 属性添加到任何元素，它将从页面的正常流程中取出。

因此，保证金是通过 Hello 字来计算的，而不是浮动元素。

解决方案

在另一个div中包装divs inlineb和floatr 没事的。结帐 JS小提琴

更新的代码

 < div class ='container'> 
< div class =inlineb>你好< / div> 
< div class =floatr inlineb> 
< input type =textclass =form-control inlineb/> cm 
< / div> 
< / div> 
< hr> 
< button class =btn btn-primary> Hello stackoverflow< / button> 
  

I'm using twitter-bootstrap framework and I'm trying to put a form-control with some text aligned to the right and some text aligned the the left (all in the same line).

Here is the fiddle: http://jsfiddle.net/2gu29/3/

HTML

<div class="inlineb">Hello</div>
<div class="floatr inlineb">
    <input type="text" class="form-control inlineb"> cm
</div>
<hr>
<button class="btn btn-primary">Hello stackoverflow</button>

CSS

hr {
    margin: 30px 0px 30px 0px;
    border-color: red;
}
body {
    padding: 30px;
}
.form-control {
    width: 100px;
}
.floatr {
    float: right;
}
.inlineb {
    display: inline;
}

But, as you see, the div which contains the input above the hr tag, does not respect the margin setted to the hr in the css (margin-top: 30px) if I use float: right. But if I don't use this property, it respect it. see it: http://jsfiddle.net/2gu29/9/

Why my solution does not work? Could you give me an exmplanation, please? Do you have another alternative to do it?

Any tip, advice or help will be appreciated, and if you need more info, let me know and I'll edit the post.

解决方案

The float CSS property specifies that an element should be taken from the normal flow and placed along the left or right side of its container, where text and inline elements will wrap around it.

If you read this line from MDN Float Documentation you can understand that whenever we apply float property to any element, it is taken out from normal flow of the page.

Hence, margin is getting calculated from the Hello word instead of floated element.

Solution

Wrap the divs inlineb and floatr in another div and you should be fine. Checkout this JS Fiddle

Updated Code

<div class='container'>
  <div class="inlineb">Hello</div>
  <div class="floatr inlineb">
    <input type="text" class="form-control inlineb" /> cm
  </div>
</div>
<hr>
<button class="btn btn-primary">Hello stackoverflow</button>

这篇关于为什么带浮点的div：right不尊重下面hr标签的边距？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！