Как иметь 2 блока смещения без дисплея: встроенный блок?

Я трачу часы на это ... без успеха.Как иметь 2 блока смещения без дисплея: встроенный блок?

Поскольку встроенный блок не очень хорошо поддерживается IE6 & 7, я хотел бы знать, если это возможно, чтобы иметь то же самое делает с использованием других атрибутов, приведенных в следующем коде:

<html><head> 
<style type="text/css"> 
.img { 
float: left; 
width:17px; 
height:15px; 
display:block; 
background-color: #FD3; 
border-style:solid; 
} 
.txt { 
float: left; 
} 
.parent { 
display: inline-block 
} 
</style></head><body> 
Follow Me 
<div class="parent "> 
<div class="img"></div> 
<div class="img"></div> 
<div class="txt">(a comment)</div> 
</div></body></html>

Тщательный: Я не может добавить/изменить контейнер «Follow me» (используя, например, float:left). Я могу контролировать ТОЛЬКО то, что находится внутри родительского div (и сам родитель div)

У вас есть обходной путь?

Thx

источник

2009-10-16 fabien7474

И чего вы хотите достичь? Пожалуйста, сделайте это более чистым в своем вопросе. –

Ну, я не могу загрузить изображение, чтобы дать вам результат, который я хочу. Но вы можете скопировать код и вставить его здесь http://www.w3schools.com/CSS/tryit.asp?filename=trycss_display Вы увидите визуальный макет, который я хочу (т.е. 2 соседних изображения, следующие за текстом «Follow Me ") – fabien7474

Попробуйте это:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
<style type="text/css"> 
.img { 
    display: block; 
    position: absolute; 
    width: 17px; 
    height: 15px; 
    background-color: #FD3; 
    border-style: solid; 
    border-width: 3px; 
} 
.leftimg { 
    top: 0; 
    left: 0; 
} 
.rightimg { 
    top: 0; 
    left: 23px; 
} 
.txt { 
    display: inline; 
} 
.parent { 
    display: inline; 
    position: relative; 
    padding: 0 0 0 46px; 
} 
</style> 
</head> 
<body> 
Follow Me 
<div class="parent "> 
    <div class="img leftimg"></div> 
    <div class="img rightimg"></div> 
    <div class="txt">(a comment)</div> 
</div> 
</body> 
</html>

У меня нет IE, чтобы проверить, но в любом случае, не забывайте доктайп, IE ведет себя иначе без него.

источник

2009-10-16 14:26:26 treznik

Ну это в основном работает ... но этого я не хотел. В моем приложении у меня много элементов ! Поэтому я не хочу определять новый класс с абсолютной позицией для каждого . Вот почему есть float: left; – fabien7474

это хромает, но это работает в Chrome 3.0, Firefox 3.5, IE 6, 7 и 8

<html><head> 
<style type="text/css"> 
    .img { 
    display: inline-block; 
    width:17px; 
    height:15px; 
    background-color: #FD3; 
    border-style:solid; 
    } 

    .parent, .txt { 
    display: inline; 
    } 
</style> 

<!--[if lte IE 7]> 
    <style type="text/css"> 
    .img { 
     display: inline; 
    } 

    .parent, .txt { 
     display: inline; 
    } 
    </style> 
<![endif]--> 

<!--[if IE 8]> 
    <style type="text/css"> 
    .img { 
     display: inline; 
    } 
    </style> 
![endif]--> 

</head><body> 
Follow Me 
<div class="parent "> 
<div class="img"></div> 
<div class="img"></div> 
<div class="txt">(a comment)</div> 
</div></body></html>

источник

2009-10-16 14:38:48

Используя ваш код, у меня нет такого же визуального эффекта в IE8 и FF3 ... Вы можете попробовать здесь: http://www.w3schools.com/CSS/tryit.asp?filename= trycss_display – fabien7474

На самом деле, рядный блок работает в IE6 и IE7, просто как-то странно.

В принципе, IE6 и IE7 встроены неправильно. Когда у естественного встроенного элемента есть макет (google для «hasLayout» для получения дополнительной информации об этом), он будет действовать как элемент встроенного блока и будет уважать ширину/высоту, установленную на нем.

Так что замените те < div class = image> s с < span> s, поэтому они естественным образом встроены, и тогда вам нужно только запустить hasLayout, и вам хорошо идти. Мой типичный метод заключается в том, чтобы установить свойство «zoom: 1» на элементах - это IE-only правильно, что ничего не будет делать, но вызовет hasLayout.

Еще лучше, конечно же, просто использовать элементы < img>, если это вообще возможно.

источник

2009-11-19 23:09:31 Xanthir

Как иметь 2 блока смещения без дисплея: встроенный блок?

ответ

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