Question

我怎么能在一个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>

Answer 1

不需要另一个div，给你的图像一个对齐属性，比如

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

Answer 2

您可以使用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>

Answer 3

为什么要避免使用多个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

Answer 4

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

例如，当我在多个子节点上有不同的样式时，我总是使用模板：

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

我怎么能把它变成一个div

4 个答案: