允许文本环绕图像

时间:2014-01-30 09:54:58

标签: html css

不确定如何解释,所以here is a fiddle。我试图将文本放在图像旁边,而不是完全在下一行,或者只有一行文本与图像对齐,而其余的行在下面。我怎么能这样做?

以下代码:

<div class="main width">
    <div class="cont2">
        <div class="c5">
            <div class="head">Column Title</div>
            <div class="feat">
                <img src="http://scitechdaily.com/images/Hubble-Image-of-Elliptical-Galaxy-PGC-6240-150x150.jpg">
                <div class="featText">Text text text text text text text text text text text text text text text text text text text text text text text</div>
            </div>
            <div class="feat">
                stuff
            </div>
            <div class="feat">
                stuff
            </div>
            <div class="feat">
                stuff
            </div>
        </div>
    </div>
</div>

CSS:

*{margin:0;padding:0;font-size:small;font-family:Roboto;vertical-align:middle;border:none;text-decoration:none;}
.width{margin:0 auto;width:84%;min-width:1000px;}
body>.main{font-size:0;}
.main{line-height:1.5;text-align:center;}
.head{background:linear-gradient(#444,#000,#444);padding:5px;font-weight:bold;width:100%;color:#FFF;}
.cont2{margin:0.5% auto;width:33%;margin-left:0.5%;display:inline-block;height:711px;}
.c5{background:#000;border-radius:7px;display:inline-block;overflow:hidden;width:100%;height:100%;border:1px solid #BBB;}
.feat{width:100%;height:24%;background:#FFF;border:1px solid #BBB;border-left:none;border-right:none;text-align:left;vertical-align:top;}

这可以在不浮动图像的情况下完成吗?

5 个答案:

答案 0 :(得分:0)

浮动img

img{
    float: left;
}

JS小提琴: http://jsfiddle.net/Lk63G/1/

答案 1 :(得分:0)

您需要将图片设置为align =“left”,如下所示: <img src="http://scitechdaily.com/images/Hubble-Image-of-Elliptical-Galaxy-PGC-6240-150x150.jpg" align="left">

答案 2 :(得分:0)

使用浮动

.feat img {float:left;}

http://jsfiddle.net/NEWLE/

答案 3 :(得分:0)

如果你把它添加到你的CSS中,你会得到图像旁边的第一行文字,其余部分在它下面,虽然它不是很漂亮。

.featText{
display: inline;
    vertical-align: top;
}

但也许这是迈出的一步?

答案 4 :(得分:0)

如果你真的想知道没有花车的解决方案,那么你去吧。但使用calc是非常糟糕的解决方案和will not work in every browser。你必须知道img的宽度。我们必须在两个元素之间包含字符空间,因为内联块元素在理想情况下并不是彼此相邻的。

.feat img{width: 50px; display: inline-block}
.featText{width: calc(100% - 54px); display: inline-block}