无法对准div和span

-1

我无法对准div和跨度彼此相邻我使用的代码是无法对准div和span

<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> 
 
\t \t \t \t \t 
 
    <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>

来源

2014-11-24 hariszaman

呃。请尽可能避免内联CSS。你可能会把我们分成一些可读的CSS规则吗？ – 2014-11-24 17:57:52

由于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/

来源

2014-11-24 17:57:40 Axel

首先，你有一个float:right;和float: left;您span元素，第二，你span元素需要的宽度。尝试width: 65%;

来源

2014-11-24 17:59:41

测试这个

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>

来源

2014-11-24 17:59:58 ashkufaraz

<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样式，这并没有帮助！

来源

2014-11-24 18:02:59 tsepehr

无法对准div和span

回答

相关问题