Обтекание однострочного div'а вокруг img (не текста) - PullRequest
Новая
       4

Обтекание однострочного div'а вокруг img (не текста)

3 голосов
/ 05 августа 2010

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

Поскольку вставка HTML не работает в StackOverFlow, здесь я попытаюсь эмулировать контактную запись Outlook 2010.

Источник: http://www.perfmon.com/download/contactdivtest.htm (редактировать: илизацените @ крутой онлайн-редактор Христо) 

<html>
<head>
<title>
</title>
<style type="text/css">
.contactLarge{
    width: 250px;
    height: 220px;
}
 img.picture {
    margin-left: 0px;
    margin-bottom: 0px;
    float: left;
}
.contactLarge item{
}
</style>
</head>
<body>
<div class="contactLarge">
<div style="background-color:#C5CED8;clear:both">title </div>
<img class="picture" width="100" height="200" src="ContactBigLeftBorder.png" alt="">
First, Last <br>
First, Last <br>
First, Last <br>
First, Last <br>
<div style="width:100%;font-weight:bold; float: left;">LastName, Firstname</div>
<div style="font-weight:bold;clear:both;"  >CompanyName</div>
<div >Title</div>
<div >Work#</div>
<div >Mobile#</div>
<div >Home</div>
<div >email1</div>
<div >email2</div>
<div >email3</div>
<div >Street</div>
<div style="background-color:#F1F5F9;  float:left;"  >City,</div>
<div style="background-color:#F1F5F9; float:left;"  >State</div>
<div style="background-color:#F1F5F9;"  >Zip</div>
<div style="background-color:#F1F5F9; clear:left;  float:left;"  >httppage</div>
<div style="background-color:#F1F5F9; ">im</div>
</div>
</body>
</html>

Может кто-нибудь сказать мне, что мне нужно сделать, чтобы все элементы div переместились вверх и обернулись вокруг изображения?Я действительно надеюсь, что я не пропускаю что-то простое ...

Вот целевой макет, который я пытаюсь:

альтернативный текст http://perfmon.com/download/contactdivtest.bmp

Ответы [ 5 ]

1 голос
/ 05 августа 2010

Очень полезным приемом для такого рода вещей является «display: inline-block».

Он отображает вещи встроенными (так что обертка будет работать), но оставляет вам почти полную настраиваемость элемента уровня блока.

1 голос
/ 05 августа 2010

Если ваш конкретный диапазон решений может работать лучше для вас:

проверить версию с диапазоном: 

<html> 
<head> 
<title> 
</title> 
<style type="text/css"> 
.contactLarge{
    width: 250px;
    height: 220px;
}
.contactLarge span{
    font-weight: bold;
}
 img.picture {
    margin-left: 0px;
    margin-bottom: 0px;
    float: left;
}
.contactLarge item{
}
</style> 
</head> 
<body> 
<div class="contactLarge"> 
<div style="background-color:#C5CED8;clear:both">title </div> 
<img class="picture" width="100" height="200" src="http://www.perfmon.com/download/ContactBigLeftBorder.png" alt=""> 
First, Last <br> 
First, Last <br> 
First, Last <br> 
First, Last <br> 
<span>LastName, Firstname</span> <br /> 
<span>CompanyName</span> <br /> 
<span >Title</span> <br> 
<span >Work#</span> <br> 
<span >Mobile#</span> <br> 
<span >Home</span> <br> 
<span >email1</span> <br> 
<span >email2</span> <br> 
<span >email3</span> <br> 
<span >Street</span> <br> 
<span style="background-color:#F1F5F9;  float:left;"  >City,</span> <br> 
<span style="background-color:#F1F5F9; float:left;"  >State</span> <br> 
<span style="background-color:#F1F5F9;"  >Zip</span> <br> 
<span style="background-color:#F1F5F9;"  >httppage</span> <br> 
<span style="background-color:#F1F5F9; ">im</span> <br> 
</div> 
</body> 
</html>
1 голос
/ 05 августа 2010

Div - элемент уровня блока. Он займет всю ширину и создаст разрыв до и после.

По умолчанию Img является встроенным элементом. Вы хотите обернуть это в другой (не плавать). Либо используйте вместо него span (span - встроенный брат div), либо установите для свойства css display значение inline в div.

1 голос
/ 05 августа 2010

A <div> является элементом уровня блока - это означает, что он автоматически очищается до новой строки и имеет ширину 100%. Не видя ваш HTML или CSS трудно понять, где вы идете не так, но попробуйте использовать float: 

div {
    float: right;
    width: 50%;
}

Edit:
Теперь, когда вы разместили фотографию того, что вы хотите, я могу сказать, что вы, вероятно, захотите что-то вроде этого:
HTML: 

<div id="container">
    <img src="foo.jpg" />
    <div id="content">
        <p>Blah blah</p>
        <p>More blah blah</p>
    </div>
</div>

CSS: 

#content {
    width: 60%;
    float: right;
}

Просто убедитесь, что ширина img + width внутреннего div меньше ширины содержащего div.

0 голосов
/ 05 августа 2010

Если вы создаете «текстовое поле» div вокруг вашего текста и перемещаете его влево, вам будет хорошо идти. См: 

<html>
<head>
<title>
</title>
<style type="text/css">
.contactLarge{
    width: 250px;
    height: 220px;
}
 img.picture {
    margin-left: 0px;
    margin-bottom: 0px;
    float: left;
}
.textbox {
    float: left;
}
.contactLarge item{
}
</style>
</head>
<body>
<div class="contactLarge">
<div style="background-color:#C5CED8;clear:both">title </div>
<img class="picture" width="100" height="200" src="ContactBigLeftBorder.png" alt="">

<div class="textbox">
First, Last <br>
First, Last <br>
First, Last <br>

First, Last <br>
<div style="width:100%;font-weight:bold; float: left;">LastName, Firstname</div>
<div style="font-weight:bold;clear:both;"  >CompanyName</div>
<div >Title</div>
<div >Work#</div>
<div >Mobile#</div>
<div >Home</div>
<div >email1</div>
<div >email2</div>

<div >email3</div>
<div >Street</div>
<div style="background-color:#F1F5F9;  float:left;"  >City,</div>
<div style="background-color:#F1F5F9; float:left;"  >State</div>
<div style="background-color:#F1F5F9;"  >Zip</div>
<div style="background-color:#F1F5F9; clear:left;  float:left;"  >httppage</div>
<div style="background-color:#F1F5F9; ">im</div>
</div>

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

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

...