Fatal编程技术网
  • html/
  • Html 如何制作两个<；div></部门>；在同一排？

Html 如何制作两个<；div></部门>；在同一排？

html

Html 如何制作两个<；div></部门>；在同一排？,html,Html,我的意思是，这两个标记具有相同的高度。使用css浮动它们： float: left 让它们浮动： HTML 你必须清除浮子。。因此，请同时使用clear:）简单：使用s 默认情况下具有display:block，这意味着下一个元素将位于新行上 您可以将它们更改为display:inline，以获得所需的行为。但是请记住，内联的只是一个对所有的div尝试一下 display:inline-block; 浮动会弄乱我的页面中心对齐。这是我得到的，我想在不丢失页面居中的情况下，在同一行上得到2和3

我的意思是，这两个标记具有相同的高度。

使用css浮动它们：

float: left
让它们浮动：

HTML

你必须清除浮子。。因此，请同时使用clear:）

简单：使用
s

默认情况下具有
display:block
，这意味着下一个元素将位于新行上

您可以将它们更改为
display:inline
，以获得所需的行为。但是请记住，内联的
只是一个

对所有的div尝试一下

display:inline-block;
浮动会弄乱我的页面中心对齐。这是我得到的，我想在不丢失页面居中的情况下，在同一行上得到2和3。浮动不起作用，因为当我调整浏览器大小时，它会随之移动

<head>
<meta http-equiv="Content-Language" content="en-us">
<style type="text/css">
.div1 {
   background: #faa;
   width: 500;
 }

.div2 {
  background: #ffc;
  width: 400;
  margin-right: 100px;
}
.div3 {
  background: #cfc;
  width: 100;
  margin-left: 400px;

}


</style>
</head>

<html>
<body>
<center>

<div class="div1"> This is no 1</div>
<div class="div2"> This is no 2</div>
<div class="div3"> This is no 3</div>

</center>
</body>
</html>


.1分部{
背景：#美国联邦航空局；
宽度：500；
}
.第2分部{
背景：#ffc；
宽度：400；
右边距：100px；
}
.第3分部{
背景：#cfc；
宽度：100；
左边距：400px；
}
这是第一
这是2号
这是3号
使用div容器并将其放入所有div中

.div_container{
    display: flex;
    flex-direction: row;
}
那容易

+1显示：内联不够灵活，浮动混乱！ 
<head>
<meta http-equiv="Content-Language" content="en-us">
<style type="text/css">
.div1 {
   background: #faa;
   width: 500;
 }

.div2 {
  background: #ffc;
  width: 400;
  margin-right: 100px;
}
.div3 {
  background: #cfc;
  width: 100;
  margin-left: 400px;

}


</style>
</head>

<html>
<body>
<center>

<div class="div1"> This is no 1</div>
<div class="div2"> This is no 2</div>
<div class="div3"> This is no 3</div>

</center>
</body>
</html>

.div_container{
    display: flex;
    flex-direction: row;
}