CSS技巧：实现两个div在同一行显示的方法
要使两个div元素在同一行显示，可以使用CSS的display属性或者flex布局。以下是两种方法的示例代码：
方法1：使用display: inline或display: inline-block
<!DOCTYPE html>
<html>
<head>
<style>
.div-inline {
display: inline-block; /* 或者 display: inline; */
width: 50%;
}
</style>
</head>
<body>
<div class="div-inline">Div 1</div>
<div class="div-inline">Div 2</div>
</body>
</html>方法2：使用flex布局
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
}
.div-flex {
flex: 1; /* 或者指定具体的宽度 */
}
</style>
</head>
<body>
<div class="container">
<div class="div-flex">Div 1</div>
<div class="div-flex">Div 2</div>
</div>
</body>
</html>在flex容器中，flex: 1确保两个div平分容器的空间，从而显示在同一行。如果你想要固定宽度，可以给div设置具体的宽度值。
评论已关闭