开发者

how can i make this into one div

开发者 https://www.devze.com 2023-03-04 08:35 出处:网络
how can i make this in one div? currently it has two divs but i need to make it in one div like the images showing on the left and the text is on the right.

how can i make this in one div? currently it has two divs but i need to make it in one div like the images showing on the left and the text is on the right.

<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>
<di开发者_运维百科v id='lipsum'>
    <p>first paragraph</p>
    <p>second paragraph</p> 
</div>


You can use clear: left:

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


no need for another div, give your image an align attribute, like

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


Why do you want to avoid using more than one div? I'd do it something like this:

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


If you are asking why the img tags and the text nodes are in the same div (which is what it sounds like to me), its because you have all of the sub-nodes belonging to a single div node (id="div_left"). Html, Xml, and XHtml are all based upon a hierarchical node structure. Anything you want to separate into divs, to handle separate float rules for example, should be split into separate divs. You could still sub-node them into a parent div, but if you want to define individual styling you should explicitly put them into div or span tags.

For example, when I have different styling on multiple sub-nodes, I invariably use the template:

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

精彩评论

暂无评论...
验证码 换一张
取 消