Html 如何从div中覆盖文本_Html_Css

Html 如何从div中覆盖文本

html css

Html 如何从div中覆盖文本,html,css,Html,Css,这里有3个div容器，其中.div1包含每行的文本。包含更多单词的文本将换行到下一行并被切掉我想做的是将每行上的所有文本放在一行中 i、 e文本可以在相邻div上重叠，但不会增加.div1的宽度我该怎么做 <!DOCTYPE html> <html> <head> <style> html,body{ width:100%; height:100%; } .div1{ width:20%; height:10

这里有3个div容器，其中

.div1

包含每行的文本。包含更多单词的文本将换行到下一行并被切掉

我想做的是将每行上的所有文本放在一行中

i、 e文本可以在相邻div上重叠，但不会增加

.div1

的宽度

我该怎么做

<!DOCTYPE html>
<html>
<head>
<style>

html,body{
    width:100%;
    height:100%;
}

.div1{
    width:20%;
    height:100%;
    background:orange;
    float:left;
}

.div2{
    width:60%;
    height:100%;
    background:red;
    float:left;
}

.div3{
    width:20%;
    height:100%;
    background:skyblue;
    float:left;
}
</style>
</head>
<body>

<div class="div1">
dksjdlkaslasf<br>
sdlkasdlaskjdksadjlad<br>
dlkasdlksajdlksajdlglkajf fjaflksajflkasjfa<br>
scahsnsa cnaskd asbjsanfsaa fm,sanflsafksajflasfnlkfjlksamflkajlfnsalkhflksafnaslhflasf</br>
</div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>


html，正文{
宽度：100%；
身高：100%；
}
.1分部{
宽度：20%；
身高：100%；
背景：橙色；
浮动：左；
}
.第2分部{
宽度：60%；
身高：100%；
背景：红色；
浮动：左；
}
.第3分部{
宽度：20%；
身高：100%；
背景：天蓝色；
浮动：左；
}
dksjdlkaslasf

sdlkasdlaskjdksadjlad

DLKASDLKSAJDLKSAJDLKAJF fjaflksajflkasjfa

scahsnsa cnaskd asbjsanfsaa fm，SANFLSAFKSAJVLASFNLKFJLKSAMFLKAJLFNSALKHFLKSAFNASLHFLASF

尝试添加z索引

.div1{
    width:20%;
    height:100%;
    background:orange;
    float:left;
    z-index: 10;
    position:relative; //(z-index only works on positioned elements)
}

添加位置：绝对

 .div1{
width:20%;
height:100%;
background:orange;
float:left;
position:absolute;
}