Div不正确浮动。我不知道我在想什么

我搞乱了一些我正在上课的css定位，并且我在使用浮动方式并排放置两个div时遇到了麻烦。Div不正确浮动。我不知道我在想什么

当我在#first div上使用float时，#second div不会移动到#first的右边。

不知道我在做什么错。

这里的HTML：

<!DOCTYPE html> 
<html> 
    <head> 
     <link rel="stylesheet" href="main.css"> 
    </head> 
    <body> 
     <div class="container"> 
      <div id="first">First</div> 
      <div id="second">Second</div> 
     </div> 
    </body> 
</html>

而这里的CSS：

html, body, div, p { 
    padding: 0; 
    margin: 0; 
} 
.container { 
    border: 2px solid black; 
    width: 1280px; 
    height: 500px; 
    margin: 10px auto 0; 
} 
.container div { 
    margin: 5px; 
    padding: 10px; 
} 
#first { 
    border: 2px solid red; 
    width: 25%; 
    float: left; 
} 
#second { 
    border: 2px solid green; 
    width: 25%; 
}

来源

2016-06-30 Eric Schumann

divs在默认情况下是块元素，这意味着他们占用屏幕的整个宽度。要解决这个问题，只需将显示样式inline-block添加到两个div。

html, body, div, p { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
.container { 
 
    border: 2px solid black; 
 
    width: 1280px; 
 
    height: 500px; 
 
    margin: 10px auto 0; 
 
} 
 
.container div { 
 
    margin: 5px; 
 
    padding: 10px; 
 
} 
 
#first { 
 
    border: 2px solid red; 
 
    width: 25%; 
 
    display: inline-block; 
 
    float: left; 
 
} 
 
#second { 
 
    border: 2px solid green; 
 
    width: 25%; 
 
    display: inline-block; 
 
}

<div class="container"> 
 
    <div id="first">First</div> 
 
    <div id="second">Second</div> 
 
</div>

来源

2016-06-30 21:21:54

这工作！非常感谢。 –

Div不正确浮动。我不知道我在想什么

回答

相关问题