Показывать встроенные Img и Div - они не отображаются - PullRequest
Новая
       7

Показывать встроенные Img и Div - они не отображаются

0 голосов
/ 05 июня 2010

Для того, чтобы следовать правильным веб-стандартам, я попытался расположить изображение и разделить его на части. Чтобы добиться этого, я использовал свойство display: inline. Но затем у меня возникла следующая проблема: изображение рендерится от центральной линии, и div не учитывает установленный для него параметр высоты. Я пытался использовать параметр line-height, но это не дало никаких полезных результатов. Я также пробовал различные комбинации с установкой поля margin / padding для некоторых значений или с авто, или заменой div на span, или упаковкой img и div дополнительными div. Мне удалось достичь желаемого результата с помощью position: absolute, но это не помогает в тех случаях, когда я хочу использовать центрированное / относительное позиционирование всего компонента ...

Какие-либо подсказки, идеи или советы по устранению неполадок?

Ниже приведен пример HTML: 

<html>
<head>
    <title>Test Page</title>
</head>
<body>      
    <div style="border: solid 2px green; height:40px;width: 600px;">
        <span style="border:solid 2px green; position: absolute; height:50px; width: 50px;">
            <i m g 
          style="display:inline; margin: 3px; padding:0px; border: solid 2px lightblue;"
            height="38px"
            width="38px" 
            src="someimage . JPG"
        />
        </span>
        <span style="position:absolute; left: 100px; width:400px; height:60px; margin:3px; border: solid 2px red;">
            Some text that should be displayed in the center/middle of the div
        </span>
    </div>
    <br />
    <br />
    <br />
    <br />
    <div style="border: solid 2px green; height:80px;width: 600px;">
        <span style="border:solid 2px green; position: absolute; height:50px; width: 50px; vertical-align:bottom;">
            123
        </span>
        &nbsp;
        <span style="position:absolute; left: 100px; width:400px; height:60px; margin:3px; border: solid 2px red;">
            Some text that should be displayed in the center/middle of the div
        </span>
    </div>
</body>
</html>

Ответы [ 3 ]

0 голосов
/ 06 июня 2010

Я не уверен, что именно вы пытаетесь достичь. Но звучит так, будто вы хотите поместить изображение, оставленное с текстом в div. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>Test Page</title>
<style>
.wrap {
    border: solid 2px green;
    width: 600px;
    overflow:hidden;
}
.myimg {
    display:inline; 
    margin: 10px; 
    padding:0px; 
    border:solid 2px green; 
    height:70px; width: 70px;
    float:left;
}
</style>
</head>
<body>      
    <div class="wrap">
        <img src="myimagepath" class="myimg" />
        <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
    </div>
</body>
</html>
0 голосов
/ 13 июня 2010

Спасибо за попытку помочь.

Первое - решение: Я добавил несколько атрибутов в тег изображения, и это очень помогло: hspace = "0" vspace = "0" align = "top" border = "0"

Второе: объяснение: Так как я хотел сделать что-то «встроенное» (или «встроенный блок»), мне пришлось выяснить, как элементы встроенного / встроенного блока выкладываются браузерами. Если вы прочтете спецификацию макета CSS2, вы скоро обнаружите, что существует проблема с изображением и элементами div. Проблема с вертикальным выравниванием - где изображение выровнено / визуализировано по сравнению с базовой линией, в то время как div идет для нижней строки (или наоборот). Это привело к тому, что мой пример не выровнялся. Помогла установка вышеупомянутых параметров для тега изображения.

Примечания: Из-за сложной истории IE5,6,7, Firefox, Gecko, WebKit, Chrome, CSS2 и BoxModel у модели макета есть некоторые недостатки. Первоначальная проблема связана с тем, что IE5 и 6 обрабатывают BoxModel иначе, чем стандарт CSS. Возможно, это основная причина наличия режима причуд и стандартов DTD. Тем не менее, это широкая тема, если вы хотите узнать больше, я рекомендую прочитать спецификации и рекомендации CSS2. Если вы хотите обсудить это больше - не стесняйтесь связаться со мной через PM

Еще раз спасибо всем за помощь и удачи с вашими макетами

С уважением MP

0 голосов
/ 05 июня 2010

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

<div style="display: inline-block;"></div>

На самом деле это часть стандарта CSS2 для отображения встроенной вещи в виде блока, похожего на символ.

Тем не менее, одна вещь состоит в том, что <div> s не должно происходить внутри элемента <p>, поэтому вместо этого следует использовать <span> теги.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...