Question

我正试图让一堆div来包裹图像，但我失败了。

由于粘贴HTML似乎在StackOverFlow中不起作用，因此这是我当前尝试模拟Outlook 2010联系人条目。

来自：http://www.perfmon.com/download/contactdivtest.htm （编辑：或查看@Hristo酷炫的在线编辑器）

<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向上移动并环绕图像？我真的希望我不会错过一些简单的东西......

这是我正在尝试的目标布局：

alt text http://perfmon.com/download/contactdivtest.bmp

Answer 1

针对您的特定解决方案范围可以更好地为您服务：

检查带有span的版本：

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

Answer 2

<div>是块级元素 - 这意味着它会自动清除到新行并且宽度为100％。如果没有看到您的HTML或CSS，很难看到您出错的地方但尝试使用float：

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

修改
既然你已经张贴了你想要的照片，我可以说你可能会想要这样的东西：
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; }

确保内部div的img +宽度的宽度小于包含div的宽度。

Answer 3

Div是一个块级元素。它将占据整个宽度并在之前和之后产生休息。

默认情况下，Img是内联元素。你想把它包装在另一个（不是浮动）。或者使用span代替（span是div的内联兄弟）或者在div上将css display属性设置为inline。

Answer 4

对于这些类型的东西，一个非常有用的技巧是“display：inline-block”。

它以内联方式显示内容（因此包装可以正常工作），但几乎可以保留块级元素的完全可配置性。

Answer 5

如果您在文本周围创建一个“文本框”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>

在图像周围包裹单行div（不是文本）

5 个答案: