2014-11-24 3 views
-1

Я не могу выровнять DIV и пролетом рядом друг с другом код я используюНевозможно выровнять DIV и диапазон

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

+4

Ugh. Пожалуйста, избегайте встроенных CSS, где это возможно. Не могли бы вы разделить это для нас на некоторые читаемые правила CSS? –

ответ

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> 

Demo: http://jsfiddle.net/ff4oduzm/1/

0

Во-первых, у вас есть float:right; и float: left; на вашем span элемент, второй, ваш span элемент нуждается в ширину. Попробуйте width: 65%;

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> 
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: прямо в конце диапазона, который не помогает!

Смежные вопросы