logo标签列表

围绕图片（而非文本）使用一行div包装

htmlcsscss-float
3
我试图让一些div环绕在一张图片周围，但是失败了。
由于在StackOverFlow中粘贴HTML似乎不起作用，所以这里是我当前尝试模仿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

请查看http://stackoverflow.com/editing-help以获取有关如何在问题中插入代码的帮助。 - Danny Nimmo
1
你能发布一张你想要实现的图片吗？我无法从HTML中看出来，而且我也不使用Outlook 2010。 - DHuntrods
尝试针对您的特定解决方案使用 span 而不是 div。 - KoolKabin
1
您可以发布HTML。在编辑器中输入您的HTML，然后将其高亮显示并单击看起来像二进制代码的按钮以进行格式化。如果您使用移动设备且没有这些按钮，则只需缩进所有代码4个空格即可将其识别为代码。 - Mike Sherov
@Mike，@DHuntrods 我更新了问题。抱歉耽搁了，我得赶火车，一直在地铁里。现在我会尝试布局和你们的建议... - makerofthings7
5个回答
1

对于您的特定解决方案，span 可能更适合您：

检查带有 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>
感谢您费心修复我的跨度。吸取了教训 :) - makerofthings7
1
一个 <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;
}

请确保img的宽度加上内部div的宽度小于包含div的宽度。

感谢您向一个 CSS 新手解释这个！ - makerofthings7
从语义上讲，p是一段文本，而span在语义上没有任何意义。你完全可以自行选择，但要记住p是块级元素，而span是内联元素。 - Danny Nimmo
1
是一个块级元素。它将占据整个宽度，并在前后生成换行符。
默认情况下，是一个内联元素。您想将其包装在另一个元素中（不要浮动）。可以使用代替（是
的内联兄弟），或者在
上设置CSS display属性为inline。
谢谢，我怎样才能知道一个给定的标签是内联还是块级元素？ - makerofthings7
http://htmlhelp.com/reference/html40/block.html 是块级元素列表。其余标签为内联元素。 - Danny Nimmo
1
这类问题非常有用的技巧是使用"display: inline-block"。
它可以将元素显示为行内元素（因此换行会起作用），但又几乎具备块级元素的所有可配置性。
我发现div和span可能是一个宗教性的争论...所以我不偏袒任何一方，而是支持两边。谢谢你的建议。在设计时我喜欢有多种选择 :) - makerofthings7
嗯，这与宗教无关，只是关乎你所认为的逻辑。对我来说，跨度从未完全让人感到合理，通常有更好的语义选项用于内联文本（例如标签、em、strong等）。 - Swizec Teller
好的，知道了。是的，我只能在绑定数据的情况下使用跨度，但这让我想...也许我应该为此开一个新问题。 - makerofthings7
0
如果您在文本周围创建一个名为“textbox”的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>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接