Question

我正在尝试创建自己的网站并且只知道一些基本的HTML，我在网上搜索了一下，似乎无法弄清楚如何在图像下方和图像左侧放置文本。

非常好：

[image] [text]
[text]

几乎就是我的网页布局。目前我只能浮动图像或将其对齐到左边，使文本环绕图像，这是我不想要的。有人能帮助我吗？

Answer 1

这是一个简单的布局问题;我认为应该在不使用表格的情况下完成。您可以在图像旁边的文本后面添加一个额外的“clear：both”-Element，如下所示：

http://jsfiddle.net/nENVN/

Answer 2

使用浮动：

<img src="" alt="" class="left" /><span>Your text goes here and will wrap around and below the image</span>
<p>More text to sit below the image</p>

文本将出现在图像旁边，如果足够长，则会环绕到底部

Answer 3

<div style="width:400px; clear:both;">
    <img src="http://media.techworld.com/cmsdata/news/3246520/1998_google.jpg" style="width:300px; float:left;" />
    <div style="width:100px; float:left;">
       text beside image
    </div>
</div>
<div style="clear:both;">
    text beneath image
</div>

http://jsfiddle.net/Tw2v7/

Answer 4

我建议使用div而不是表格然后使用CSS来调整和定位div

<div class="image">Image goes here</div>
<div class="rtext">text on right of image here</div>
<div class="ltext">text below image here</div>

这是上述

的基本风格

.image {width:200px; float:left}
.rtext {width:200px; float:left}
.ltext {width:400px}

然后将ltext div设置为宽度以便坐在图像或rtext div旁边。然后它将被迫坐在其他2个div之下。这应该达到你想要的效果。

Answer 5

这是你想要的吗？

http://jsfiddle.net/ptzDw/

基本HTML结构：

<div id="wrap">

    <div id="left">
        <img src="http://dummyimage.com/300x90/7999/fff" alt="image">
        <p>text goes here</p>
    </div>
    <div id="right">
        <p>text goes here</p>  
    </div>

</div>

CSS：

#wrap { width: 800px; }
#left { width: 300px; float: left; }
#right { width: 400px; float: left; margin-left: 10px;}

HTML图像问题

5 个答案: