如何将两个div彼此相邻放置？

CSS

Gil

2020-03-22

#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实现呢？

第2556篇《如何将两个div彼此相邻放置？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共11个回答

小胖Gil 2020.03.22

我的方法：

<div class="left">Left</div>
<div class="right">Right</div>

CSS：

.left {
    float: left;
    width: calc(100% - 200px);
    background: green;
}

.right {
    float: right;
    width: 200px;
    background: yellow;
}

梅 2020.03.22

这是正确的CSS3答案。希望这现在能以某种方式对您有所帮助：D我真的建议您阅读本书：https : //www.amazon.com/Book-CSS3-Developers-Future-Design/dp/1593272863实际上，我已经从现在阅读本书中获得了此解决方案。：D

#wrapper{
  display: flex;
  flex-direction: row;
  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>

Stafan 2020.03.22

在材料UI和react.js中，您可以使用网格

<Grid
  container
  direction="row"
  justify="center"
  alignItems="center"
>
    <Grid item xs>
      <Paper className={classes.paper}>xs</Paper>
    </Grid>
    <Grid item xs>
      <Paper className={classes.paper}>xs</Paper>
    </Grid>
    <Grid item xs>
      <Paper className={classes.paper}>xs</Paper>
    </Grid>

</Grid>

Mandy村村 2020.03.22

float:left;在两个div中添加属性。
添加display:inline-block;属性。
display:flex;在父div中添加属性。

Harry小哥 2020.03.22

这很容易-您可以用困难的方式做到

.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%;
}

<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>

还是简单的方法

#wrapper {
  display: flex;
  border: 1px solid black;
}
#first {
    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>

还有大约一百万种其他方式。
但是我只是简单的方法。我还想告诉您，这里的许多答案都是错误的，但是我所展示的两种方法至少都适用于HTML 5。

小胖MandyGil 2020.03.22

这是解决方案：

#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/

Mandy村村 2020.03.22

有两个div

<div id="div1">The two divs are</div>
<div id="div2">next to each other.</div>

您还可以使用该display属性：

#div1 {
    display: inline-block;
}

#div2 {
    display: inline-block;
}

jsFiddle示例在这里。

如果div1超过一定高度，div2将被放置div1在底部的旁边。要解决此问题，请vertical-align:top;在上使用div2。

jsFiddle示例在这里。

伽罗理查德 2020.03.22

选项1

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

使用box-sizing: border-box;浮动div元素。值border-box会将填充和边框强制为宽度和高度，而不是对其进行扩展。

在上使用clearfix <div id="wrapper">清除浮动子元素，这将使包装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在一个元素上使用，在另一个元素上使用固定的宽度。

添加position：相对于<div id="wrapper">element，以使子元素绝对位于该<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

display:inline-block在两个div元素上使用，并为两个div元素设置一个总宽度为100％的％宽度。

再次（与float:left示例相同）box-sizing: border-box;在div元素上使用。值border-box会将填充和边框强制为宽度和高度，而不是对其进行扩展。

注意：内联块元素可能会存在间距问题，因为它受HTML标记中的空格影响。此处提供更多信息：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

乐 2020.03.22

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

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

JSFiddle链接

斯丁前端 2020.03.22

您可以使用CSS float属性将元素彼此相邻放置：

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

您需要确保wrapper div允许宽度浮动，并且页边距等设置正确。

路易西里阳光 2020.03.22

尝试使用flexbox模型。它很容易写。

Live Jsfiddle

CSS：

#wrapper {
  display: flex;
  border: 1px solid black;
}
#first {
    border: 1px solid red;
}
#second {
    border: 1px solid green;
}

默认方向是行。因此，它在#wrapper中彼此对齐。但是不支持IE9或更低版本

相似问题

基于react18+vite4+zustand网页端仿微信聊天实例

0 回答

基于tauri+vite4+pinia跨端后台管理系统应用

0 回答

HTML5 Drag与Drop 拖动时更改图标/光标

5 回答

如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)

25 回答

基于tauri+vue3跨端聊天应用|tauri仿微信模板

0 回答

Ace Editor一款比较好用的展示代码组件

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android