Chrome内联块不起作用

我想创建一个基本的HTML页面布局。该代码在Firefox的最新版本中工作正常，但不在Chrome（v31）中。问题：Chrome在第二个div后面插入换行符。这是一个铬错误还是我的代码错了？如果这是一个铬错误，那么什么是解决方法或修复？Chrome内联块不起作用

<div class="div-1"></div><div class="div-2"></div><div class="div-3"> 
    <form> 
     <fieldset> 
      <label for="uid">Email</label> 
      <input type="email" id="email" placeholder="Email"> 

      <label for="password">Password</label> 
      <input type="password" id="password" placeholder="Password"> 

      <input type="submit" value="Sign In"> 
     </fieldset> 
    </form> 
</div>

样式

@import url("reset.css"); 
.div-1 { 
background-color: green; 
height:30px; 
width: inherit; 
} 

.div-2 { 
background-color: red; 
height: 275px; 
width: 752px; 
display: inline-block; 
} 

.div-3 { 
background-color: blue; 
height: auto; 
width: 255px; 
vertical-align: top; 
display: inline-block; 
float: right; 
}

FIDDLE

来源

2014-01-08 Ajinkya

做工精细这里：http://jsfiddle.net/R6yvq/。使用Chrome：33.0。注意：我已经改变了div-2的宽度以适合jsfiddle窗口。 – Damien

我在这里看到Chrome/FF没有区别.. – Goombah

嗯。我认为这个问题只会在我的Chrome版本中特别弹出。我是初学者，只是想确保我不是这里的罪魁祸首。多谢你们。 – Ajinkya

您正在使用.div-3float: right;，它给出了一个 '语境' 到你的DIV和display:inline-block;是无用的。

上.div-1的width: inherit;也没用，因为块将始终以所有可用的宽度从他最亲密的父母

来源

2014-01-08 15:51:28 Germain

Chrome内联块不起作用

回答

相关问题