Question

这可能很难用英语描述。我想要一个图像（50x50带margin-right:20px），然后在该图像旁边（向右）我想要一个div（带边框）到达容器的末尾。容器可以是任何尺寸（因此静态值将是......好吧）。我想知道是否有办法在没有javascript的情况下做到这一点。

所以如果我做了这样的事情：

.img { width:50px; margin-right:20px }
.content { height:30px; line-height:30px; padding:10px 0; border:1px solid #272727 }

我希望代码看起来像这样：

<div id='some-global-container-that-is-a-resizable-length'>
    <div class='img'>
        <img src='myimage.png'>
    </div>
    <div class='content'>
        here is some content i want to be displayed from my server
    </div>
</div>

如果我不小心忘记关闭标签或其他东西，那么真正的代码不会在堆栈溢出中生成wysiwyg ...这是一个CSS问题.K thx！

我忘了说这个...... 如果我尝试使用float:left执行.img，它将显示在“另一个div”内...这不是我想要的内容，display:inline会使div（带边框）显示在图像下方DIV。

Answer 1

HTML：

<div class='container'>
    <img />
    <div class='text'>
        content...
    </div>
</div>

CSS：

.container{
    overflow:hidden;
}

img{
    width:50px;
    height:50px;
    background:#ffa;
    float:left;
}

.text{
    margin-left:70px;
}

的jsfiddle： http://jsfiddle.net/qy3yy/

Answer 2

以下CSS应该处理您的布局。

.img{width:50px; float: left; clear: none;}
.content{width: auto; margin-left: 50px; float: none;}

您可以根据需要添加其他样式。图像不会显示在DIV内部。：）

带有div边框的CSS图像

2 个答案: