两个input同一行 - 图片并排css




如何将两个div放在一起? (6)

  1. 添加float:left; 财产在两个divs。

  2. 添加display:inline-block; 属性。

  3. 添加display:flex; 财产在父母div。

考虑下面的代码

#wrapper {
    width: 500px;
    border: 1px solid black;
}
#first {
    width: 300px;
    border: 1px solid red;
}
#second {
    border: 1px solid green;
}
<div id="wrapper">
    <div id="first">Stack Overflow is for professional and enthusiast programmers, people who write code because they love it.</div>
    <div id="second">When you post a new question, other users will almost immediately see it and try to provide good answers. This often happens in a matter of minutes, so be sure to check back frequently when your question is still new for the best response.</div>
</div>

我希望两个div在包装div内彼此相邻。 在这种情况下,绿色div的高度应该决定包装的高度。

我怎么能通过CSS实现这一点?


选项1

在两个div元素上使用float:left ,并为两个div元素设置一个宽度为100%的%宽度。

使用box-sizing: border-box; 浮动div元素上。 值边框强制填充和边框的宽度和高度,而不是展开它。

<div id="wrapper">上使用clearfix来清除浮动子元素,这会使包装div的比例缩放到正确的高度。

.clearfix:after {
   content: " "; 
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

#first, #second{
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

#wrapper {
    width: 500px;
    border: 1px solid black;
}
#first {
    border: 1px solid red;
    float:left;
    width:50%;
}
#second {
    border: 1px solid green;
    float:left;
    width:50%;
}

http://jsfiddle.net/dqC8t/3381/

选项2

在一个元素上使用position:absolute在另一元素上使用固定宽度。

添加位置:相对于<div id="wrapper">元素,使子元素完全位于<div id="wrapper">元素中。

#wrapper {
    width: 500px;
    border: 1px solid black;
    position:relative;
}
#first {
    border: 1px solid red;
    width:100px;
}
#second {
    border: 1px solid green;
    position:absolute;
    top:0;
    left:100px;
    right:0;
}

http://jsfiddle.net/dqC8t/3382/

选项3

div元素上使用display:inline-block ,并为两个div元素设置一个宽度为100%的%宽度。

再次(与float:left例子相同)使用box-sizing: border-box; 对div元素。 值边框强制填充和边框的宽度和高度,而不是展开它。

注意:内嵌块元素可能会产生间距问题,因为它受HTML标记中的空格影响。 更多信息请访问: https://css-tricks.com/fighting-the-space-between-inline-block-elements/https://css-tricks.com/fighting-the-space-between-inline-block-elements/

#first, #second{
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

#wrapper {
    width: 500px;
    border: 1px solid black;
    position:relative;
}

#first {
    width:50%;
    border: 1px solid red;
    display:inline-block;
}

#second {
    width:50%;
    border: 1px solid green;
    display:inline-block;
}

http://jsfiddle.net/dqC8t/3383/

最后的选择是使用名为flex的新显示选项,但请注意浏览器兼容性可能会用于播放:

http://caniuse.com/#feat=flexbox

http://www.sketchingwithcss.com/samplechapter/cheatsheet.html


尝试使用下面的代码更改将两个div放在彼此前面

#wrapper {
  width: 500px;
  border: 1px solid black;
  display:flex;
}

JSFiddle链接


您可以通过使用CSS浮点属性将元素放置在彼此的旁边:

#first {
float: left;
}
#second {
float: left;
}

你需要确保包装div允许在宽度方面浮动,边距等被正确设置。


浮动一个或两个内部div。

浮动一个div:

#wrapper {
    width: 500px;
    border: 1px solid black;
    overflow: hidden; /* will contain if #first is longer than #second */
}
#first {
    width: 300px;
    float:left; /* add this */
    border: 1px solid red;
}
#second {
    border: 1px solid green;
    overflow: hidden; /* if you don't want #second to wrap below #first */
}

或者如果你同时浮动,你需要鼓励包装div包含两个浮动的子元素,否则它会认为它是空的,而不是将边界放在它们周围

浮动两个div:

#wrapper {
    width: 500px;
    border: 1px solid black;
    overflow: hidden; /* add this to contain floated children */
}
#first {
    width: 300px;
    float:left; /* add this */
    border: 1px solid red;
}
#second {
    border: 1px solid green;
    float: left; /* add this */
}

这里是解决方案:

#wrapper {
    width: 500px;
    border: 1px solid black;
    overflow: auto; /* so the size of the wrapper is alway the size of the longest content */
}
#first {
    float: left;
    width: 300px;
    border: 1px solid red;
}
#second {
    border: 1px solid green;
    margin: 0 0 0 302px; /* considering the border you need to use a margin so the content does not float under the first div*/
}

您的演示已更新;

http://jsfiddle.net/dqC8t/1/







html