html实现div在同一行

最新推荐文章于 2024-03-15 13:53:06 发布

MasonYyp

最新推荐文章于 2024-03-15 13:53:06 发布

阅读量4.9k

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/make_progress/article/details/114004130

版权

前端专栏收录该内容

28 篇文章 1 订阅

订阅专栏

使用弹性布局完成div在同一行显示，应用在导航中。

# js实现深拷贝

# let dataTextAll = new Array();
# let dataTextDate = JSON.parse(JSON.stringify(dataTextAll));

1 在同一行中有两个div

<!DOCTYPE html>
<html>
<head>
<title>测试</title>
<style type="text/css">
.data{
width: 100px;
display: flex;
}
.data_left{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.data_right{
white-space: nowrap;
/* 自动向右对齐 */
margin-left: auto;
}
</style>
</head>
<body>

<div class="data">
<div class="data_left">
左侧尽量显示，内容超出宽度显示省略号
</div>

<div class="data_right">
右侧靠右
</div>
</div>
</body>
</html>

2 在同一行中有多个div弹性布局

使用弹性布局和盒布局

<!DOCTYPE html>
<html>
<head>
<title>测试</title>
<style type="text/css">
.data{
/*注意：此处使用width无效*/
display: flex;
}
.data>div{
box-sizing: border-box;
/* 如果 div高度不一样，让div顶部对齐使用vertical-align*/
/*vertical-align: top;*/
}
.data_left{
width:300px;
background-color: #E6A23C;
}
.data_middle{
flex: 1;
background-color: #909399;
}
.data_right{
background-color: #67C23A;
width:300px;
}
</style>
</head>

<body>

<div class="data">
<div class="data_left">
左侧
</div>

MasonYyp

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
html实现div在同一行

使用弹性布局完成div在同一行显示，应用在导航中。# js实现深拷贝# let dataTextAll = new Array();# let dataTextDate = JSON.parse(JSON.stringify(dataTextAll));1 在同一行中有两个div<!DOCTYPE html><html><head> <title>测试</title> <style type="t...
复制链接

扫一扫