三个div并排在一起，但它们之间没有自动边距
可以通过以下几种方式实现：
- 使用浮动（float）属性：给每个div设置float属性为left或right，使它们浮动在同一行。同时，设置每个div的宽度和高度，以确保它们在一行内并排显示。这种方式需要注意清除浮动，以避免对后续元素布局的影响。
<style>
.div1, .div2, .div3 {
float: left;
width: 33.33%;
height: 100px;
}
</style>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>- 使用flexbox布局：将三个div包裹在一个父容器中，并设置父容器的display属性为flex，使其成为一个弹性容器。然后，设置每个div的flex属性为1，使它们平均分配父容器的宽度。这种方式可以自动调整div之间的间距。
<style>
.container {
display: flex;
}
.div1, .div2, .div3 {
flex: 1;
height: 100px;
}
</style>
<div class="container">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</div>- 使用网格布局（grid）：将三个div包裹在一个父容器中，并设置父容器的display属性为grid，使其成为一个网格容器。然后，设置每个div的grid-column属性，使它们占据网格容器中的不同列。这种方式可以自动调整div之间的间距。
<style>
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 0;
}
.div1, .div2, .div3 {
height: 100px;
}
</style>
<div class="container">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</div>以上是三种常用的方法实现三个div并排在一起，但它们之间没有自动边距。具体选择哪种方法取决于具体的布局需求和兼容性要求。
相关·内容
2回答
CSS:是否有可能实现以下布局？
css、flexbox、css-grid
是否可以使用CSS3 Flexbox实现以下响应性设计布局，如下图所示？我能够实现桌面布局使用下面的代码。但是，我想不出一种使div #div3和#div4在#div1和#div2下面填充的方法
编辑:很抱歉，我忘了提到它不仅仅局限于CSS Flexbox，而且看起来网格解决方案会更灵活，所以我将它标记为接受的答案。谢谢你们的帮助！
我的代码
#div1 {
background-color: red;
width: 100px;
height: 100px;
}
#div2 {
background-color: green;
width: 100px;
浏览 0提问于2019-03-16得票数 2
回答已采纳
6回答
如何将两个div并排放置，另一个div与第二个div对齐？
html、css
我有两个div (div1和div2)并排，我想把第三个div (div3)放在div2下面。
我尝试为div3添加一个边距，以尝试将其对齐，但是div1宽度是动态的。我也尝试过向右浮动div3，但是内容太远了，不像上面的图像那样与div2的开头对齐
.row {
display: flex;
}
.div1 {
margin-right: 1em;
}
<div class="row">
<div class="div1">
<p> some content with unknown w
浏览 0提问于2019-09-29得票数 4
回答已采纳
5回答
如何并排制作3div
html、css、css-float
怎样才能使3div并排。div1是极左的，div3是极右的，div2是中间的。
我知道这可以通过显示: flex和正当性内容:空格之间完成，但我正在寻找一种没有flex的方法。
这是我的方法，但没能成功。
我试着做所有div的显示:内联块和浮点数:左和浮:右到两个极端的div，中间一个我尝试了边距:自动，但看起来它不尊重它。
请帮帮忙
.container {
border: 1px solid;
}
.container div {
height: 50px;
width: 50px;
background: red;
display: inline-block;
}
浏览 1提问于2016-11-22得票数 1
回答已采纳
4回答
需要在两个div元素之间放置div
html、css
我要去拿这个
我的代码：
.wrapper {
display: flex;
height: 100px;
width: 300px;
}
.div1 {
background-color: red;
width: 100px;
}
.div2 {
background-color: green;
width: 100px;
}
.div3 {
background-color: yellow;
width: 100px;
}
<div class="wrapper">
<div class="div
浏览 10提问于2022-04-11得票数 1
4回答
放置3个HTML div；1个左2个右
css、html
以下问题：
我有3个div。
<div id="div1"> </div>
<div id="div2"> </div>
<div id="div3"> </div>
我想把它们按以下顺序排列：
DIV1 DIV2
DIV1 DIV2
DIV1 DIV2
........DIV3
........DIV3
........DIV3
下面是左边的一个div和右边的两个div。当我给前两个div一个float: left时，它看起来是这样的：
DIV1 DIV2
DIV1 D
浏览 3提问于2013-05-27得票数 2
回答已采纳
6回答
浮后Div碰撞
css、html、css-float
我有一些div，我想这样做:父div (topDiv)持有三个div，它们浮动(左、左、右)。topDiv不浮动。
在这个topDiv之后，我有了bottomDiv。这个div也不会浮动。问题是topDiv和bottomDiv相互碰撞。
我想这样做：
DIV1 DIV2 DIV3<br>
DIV1 <br>
DIV4
但我得到
DIV1 DIV2 DIV3 **DIV4**
<br>DIV1
这是代码：
<html>
<head>
<title>Insert title here</title>
<
浏览 8提问于2014-03-10得票数 0
回答已采纳
3回答
如何使向下的div沿着其他div向上移动
css、css-float
我想让所有的div并排出现。
我的意思是去掉#div3和#div4顶部的空间。
我试过float和display:inline-block
我的代码：
<div id="wrapper">
<div id="div1">The first</div>
<div id="div2">next to each other.</div>
<div id="div3">The two divs are</div>
&
浏览 1提问于2015-04-06得票数 1
2回答
将3个div与自动边距对齐
jquery、html、css
我想在一行中对齐三个部分:一个在左边，一个在中间，一个在右边。我该怎么做呢？
<div id="container">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</div>
css：
#container{
border:1px solid #ff0000;
width: 100%;
浏览 0提问于2013-01-30得票数 0
回答已采纳
3回答
如何在浏览器中使两个div在同一行等高
html、css、layout、dimensions
例如，这是我的页面布局，
++++++++++++++++++++++++++
+ + div2 + +
+ div1 + + +
+ + + div3 +
+ +++++++++ +
+ + + +
+ + +++++++++
+ + +
++++++++++++++++++++++++++
如图所示，div1、div2和div3在同一行，
<div id="container&#
浏览 2提问于2011-03-17得票数 1
回答已采纳
2回答
单击同一按钮后，一次显示下一个图像div，并在javascript html中隐藏当前图像div。
javascript、jquery、css、html
我正在使用Javascript、Html5、Jquery和Css。现在，我有三个图像div，我想显示一个图像div后点击按钮，我想显示下一个div后，单击相同的按钮，并隐藏当前div。
现在我正在使用以下代码：
Css代码：
#Div2 {
display: none;
}
#Div3 {
display: none;
}
Html代码：
<div class="container">
<div class="row">
<input id="Button1" type
浏览 1提问于2015-11-14得票数 1
回答已采纳
5回答
为什么在本例中，如果不使用属性浮点数而使用<div>之一，那么浮点数就不能工作？
html、css、css-float
为什么div3没有显示我定义的绿色？？
<div style="width:100px;height:100px;background-color:#ffff00;float:left">
div1
</div>
<div style="width:100px;height:100px;background-color:#0000ff;float:left">
div2
</div>
<div style="width:100px;height:100px;background-color:#
浏览 6提问于2013-08-05得票数 2
回答已采纳
2回答
如何使多个div以等宽水平排列？
html、css
我想要两个，三个或更多的div水平排列，然后每个宽度将填补所有可用的空间。例如，对于两个div，它们将占用空间的一半，而三个div将占用空间的1/3，依此类推。
我尝试使用显示内联块，可以让div并排排列，但如何使它们填充可用的父容器宽度？
编辑:最好没有显示flex方法(我不确定它是否与IE11完全兼容)
.container{
border: solid 1px green;
height: 50px;
box-sizing: border-box;
}
.button{
display:inline-block;
border: solid 1px black
浏览 6提问于2016-08-10得票数 2
回答已采纳
4回答
无法使用css宽度属性设置div的像素宽度
html、css
我正在尝试设置一个包含4个div的div。我想设置容器的宽度和一些包含的div来设置值，但它们似乎只是内容的宽度。
<html>
<head>
<style>
div {
border: 1px solid #888;
}
.container {
width: 300px;
position: relative;
}
.container div {
display: inline;
}
.div1 {
width: 20px;
overflow: hidden;
}
.div2 {
浏览 0提问于2010-11-02得票数 7
回答已采纳
2回答
网格项目可以包装吗？
javascript、css、overflow、css-grid
我如何使网格项目包装在他们的容器内？因为每当输入64作为新的网格大小时，网格项就会溢出其容器。我想要网格项调整到网格容器的大小。
因此，基本上，我希望网格容器保持其大小，不管添加了多少新的网格项。
const grid = document.querySelector('#grid-container');
function makeGrid(rows, cols) {
for (let i = 0; i < (rows * cols); i++) {
grid.style.setProperty('--grid-rows', rows)
浏览 7提问于2022-05-12得票数 1
回答已采纳
2回答
如何使用javascript的next和以前的按钮逐个显示列表项，请不要使用jquery。
javascript、html、css、slider
我正在学习javascript，并且想要制作一个非常简单的滑块来理解事情是如何工作的，并在我的项目中使用它。
这是代码中的代码，这里也是
预期结果：
默认情况下，div1以第一张幻灯片的形式内联。用户按下下一步，隐藏div1然后显示div2等等。用户按下前面的按钮，会做相反的操作。用户在数组开始时按下一行。
谢谢你的帮助。
var listItems = document.getElementById("slides-container-li").children;
function clickNext() {
listItems[0].style.display
浏览 6提问于2022-06-20得票数 0
2回答
定位3个div:2行1列
html、css
我需要定位3div在下面的图像:到目前为止，我得到了“浮动”，但我未能具体实现这一结果。
这是我目前的结果：
<head>
<style>
#div-container {
width: 500px;
height: 500px;
border: 1px solid #000000;
}
.div1 {
width: 200px;
height: 100px;
border: 1px solid #d1d1d1;
}
.div2 {
width: 200px;
height: 100px;
float: left;
border: 1px solid #d1d1d1;
浏览 4提问于2015-03-06得票数 0
回答已采纳
1回答
css网格一部分上的不规则网格线
html、css、css-grid
我在CSS中设置了一个非常简单的网格，但当我查看检查器中的网格线时，在底部有一个奇怪的不规则。我不明白当其余的网格线都是规则的时候，为什么会出现这种情况。 在div-4上没有特殊的样式，它和其他的是一样的。这与h3标记产生的边距有关吗？ ? HTML <div class="left-sidebar-grid">
<div class="div1">
<h3>Div1</h3>
</div>
<div class="div2">
浏览 7提问于2020-04-18得票数 1
1回答
如何用柔性盒垂直包装内容？
html、css、flexbox
我在一个柔性箱的容器里有三个div。
我希望三个divs显示如下：
+-----------------------------------------------+
| +-----------------+-----------------+ |
| | | | |
| | | | |
| +-----------------+-----------------+ |
|
浏览 3提问于2016-05-24得票数 2
回答已采纳
2回答
在小分辨率上，一个div覆盖另一个(flex)
css、responsive
我有这个密码
.div1{
width:100%;
}
.div2{
width:100%;
}
.div3{
width:100%;
}
.div4{
width:100%;
}
@media(max-width:800px){
.div1,.div2,.div3,.div4{
width:100%;
height:100%;
}
.flexyy{
display:flex;
浏览 4提问于2020-08-16得票数 0
回答已采纳
1回答
在调整css网格容器的大小时遇到问题
html、css、frontend
我是一个在使用网格的新手，所以请，如果问题是愚蠢的，不要评判我的努力，反正我是想有一个5div的布局。因此，我有基本的轮廓，但我试图使这个网格占屏幕宽度的100%，我是非常失败的。
这是我的html：
<div class="parent">
<div class="div1"> </div>
<div class="div2"> </div>
<div class="div3"> </div>
<div class="div4
浏览 1提问于2022-06-12得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
