Question

不确定如何解释，所以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;}

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

Answer 1

浮动img：

img{
    float: left;
}

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

Answer 2

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

Answer 3

使用浮动

.feat img {float:left;}

http://jsfiddle.net/NEWLE/

Answer 4

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

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

但也许这是迈出的一步？

Answer 5

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

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

允许文本环绕图像

5 个答案: