Question

这里我有3个div容器，其中.div1包含每行的文本。包含更多单词的文本将换行到下一行并被删除。

我想要做的是让每行的所有文字都在一行中。

即文本可以在邻居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>

Answer 1

尝试添加z-index。

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

Answer 2

添加位置：绝对

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

如何从div叠加文本

2 个答案: