我怎样才能把它变成一个div

我怎么能在一个div中做到这一点？目前它有两个div，但我需要使它成为一个div，如左侧显示的图像，文本显示在右侧。我怎样才能把它变成一个div

<div style='float: left; margin-left: 6px; margin-bottom: 6px; height: 191px;'> 
    <img src='http://www.cnn.com/features/150px.jpg' width='100' height='100' border='0' alt='Lipsum' /> 
    <br /> 
    <img src='http://www.cnn.com/features/b150px.jpg' width='100' height='100' border='0' alt='Lipsum' /> 
    <br /> 
    <br /> 
    <br /> 
</div> 
<div id='lipsum'> 
    <p>first paragraph</p> 
    <p>second paragraph</p> 
</div>

来源

2011-05-11 Nick Kahn

我只看到一个DIV有... – rusty 2011-05-11 13:12:04

你能扩大在你的问题你要求使一个div，但只有一个div标签用于此htm l – 2011-05-11 13:12:59

你不应该像其他人的网站那样从CNN那里榨取图像。（我假设你不是CNN网站的开发者）。你不应该拿走他们的资产，但是如果你真的想要它，至少要将图像保存到你自己的服务器并从那里加载。 – Jeff 2011-05-11 13:27:41

您可以使用clear: left：

参见：http://jsfiddle.net/thirtydot/FN4h4/

CSS：

img { 
    float: left; 
    clear: left; 
    margin: 0 6px 
}

HTML：

<div id='lipsum'> 

    <img src='http://www.cnn.com/features/150px.jpg' width='100' height='100' border='0' alt='Lipsum' /> 
    <img src='http://www.cnn.com/features/b150px.jpg' width='100' height='100' border='0' alt='Lipsum' /> 

    <p>Lorem ipsum..</p> 
    <p>Lorem ipsum..</p> 
</div>

来源

2011-05-11 14:03:39 thirtydot

只是为了让你知道你的图片不会出现。另一个问题。这将在IE7中工作 - 我已经看到它在使用'clear：'作为'float'的相同css项目时有问题吗？（这是一个好奇的问题，而不是一个洞挑） – 2011-05-11 14:15:48

我怎么能在图像之间有一个空间，我只需要图像开始段落 – 2011-05-11 14:18:20

@我的头伤害：我刚刚使用了问题的图像。就我所知，这应该在IE7中工作得很好。我不熟悉任何与您的描述类似的IE7错误。 – thirtydot 2011-05-11 14:24:19

不需要另一个div给你的形象align属性，像

<img src='http://www.cnn.com/features/150px.jpg' width='100' 
     height='100' border='0' alt='Lipsum' align="left"/>

来源

2011-05-11 13:34:27

如果你问为什么的img标签和文本节点在同一div（这是什么听起来像我），因为你有所有的子节点属于一个单独的节点（id =“div_left”）。 Html，Xml和XHtml都基于分层节点结构。任何你想分成div的东西，例如处理单独的浮动规则，都应该被分成不同的div。你仍然可以将它们子节点放到一个父div中，但是如果你想定义单独的样式，你应该明确地将它们放入div或span标签中。

例如，当我有多个子节点不同的造型，我总是使用模板：

<div id="parentId"> 
    <div id="child1" /> 
    <div id="child2" /> 
</div>

来源

2011-05-11 13:40:15 BMB

我必须补充一点，就分离内容和风格而言，我是一个纯粹主义者。作为一名Java开发人员，我认为坚持这一基本原则会在很多方面为未来开发创造灵活性，其中最重要的是允许将数据提取移植到全新的逻辑中。 – BMB 2011-05-11 13:44:26

要避免使用多个div为什么呢？我会做这样的事情：

HTML

<div class="article"> 
    <img src="image1.jpg"/> 
    <p>Paragraph 1</p> 
</div> 
<div class="article"> 
    <img src="image2.jpg"/> 
    <p>Paragraph 2</p> 
</div>

CSS

.article 
{ 
    clear: both; 
    width: 400px; 
} 
.article img 
{ 
    float: left; 
} 
.article p 
{ 
    float: right; 
}

Working Demo

来源

2011-05-11 14:05:14 Town

我如何在图像之间有空间，我只需要图像在段落开始的位置 – 2011-05-11 14:18:06

我怎样才能把它变成一个div

回答

相关问题