無法對準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

回答

相關問題