无法对齐div和span

时间：2014-11-24 17:49:49

标签： html css

我无法将div与彼此相邻的范围对齐我正在使用的代码

＆＃13;
＆＃13; 
    <div style="float:left;width:35%;max-width:150px;height:30vh;max-height:200px;background-position:center;background-repeat:no-repeat;background-image:url('http://placehold.it/150x200')"></div> 
					 
    <span style="margin-left:10px;float:left;font-weight:bold;font-size:22px; display:inline-block;white-space: nowrap;overflow:hidden !important;text-overflow: ellipsis;float:right">ssddsa.hksbkjasdouahdohjaqios'djqw'eodhj;oewdh;oeuwdh;eouwhd;uehwd;iuewghd;iuewhgd;ehwdp;i7euwhgd;pi7hywe;idhg;iwedhouw9ehdiouwehdi;uhwe;iduheiuwdh;eiuwhd;iuwehdiuwehdiuhwediuwhdiuhweiudiuewhdiusdds</span>
＆＃13;
＆＃13;
＆＃13;

4 个答案:

答案 0 :(得分：1)

因为span的宽度太宽而无法放在div旁边。

您必须在span

上指定宽度   
<span style="width:35%; margin-left:10px;float:left;font-weight:bold;font-size:22px; display:inline-block;white-space: nowrap;overflow:hidden !important;text-overflow: ellipsis;float:right">ssddsa.hksbkjasdouahdohjaqios'djqw'eodhj;oewdh;oeuwdh;eouwhd;uehwd;iuewghd;iuewhgd;ehwdp;i7euwhgd;pi7hywe;idhg;iwedhouw9ehdiouwehdi;uhwe;iduheiuwdh;eiuwhd;iuwehdiuwehdiuhwediuwhdiuhweiudiuewhdiusdds</span>

演示：http://jsfiddle.net/ff4oduzm/1/

答案 1 :(得分：0)

首先，您的float:right;元素上有float: left;和span，其次，您的span元素需要宽度。试试width: 65%;

答案 2 :(得分：0)

测试这个

http://jsfiddle.net/n8n7pyxk/ 

<div style="float:left;width:35%;max-width:150px;height:30vh;max-height:200px;background-position:center;background-repeat:no-repeat;background-image:url('http://placehold.it/150x200')"></div> 

<span style="margin-left:10px;float:left;font-weight:bold;font-size:22px; display:inline-block;white-space: nowrap;overflow:hidden !important;text-overflow: ellipsis;float:right">ssddsa.hksbkjasdouahdohjaqios'djqw'eodhj;oewdh;oeuwdh;eouwhd;uehwd;iuewghd;iuewhgd;ehwdp;i7euwhgd;pi7hywe;idhg;iwedhouw9ehdiouwehdi;uhwe;iduheiuwdh;eiuwhd;iuwehdiuwehdiuhwediuwhdiuhweiudiuewhdiusdds</span>

答案 3 :(得分：0)

<html>
<head>
<style>
div {
float:left;
width:35%;
max-width:150px;
height:30vh;
max-height:200px;
background-position:center;
background-repeat:no-repeat;
background-image:url('http://placehold.it/150x200');
}
span {
margin-left:10px;
float:left;
font-weight:bold;
font-size:22px;
display:inline-block;
white-space: nowrap;
overflow:hidden !important;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div></div> 
<span>This is span</span> 
</body>
</html>

工作得很好！

原因：通过在跨度上放置太多没有空格的单词，宽度变得如此之长。 您还使用了float：右边的span样式，这对此没有帮助！

相关问题
最新问题