带有div边框的CSS图像

这可能很难用英语来描述。我想要一个图像（50x50，右边空白：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>

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

.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，它将显示在另一个分区中。。。这不是我想要的，并且

display:inline

将使div（带边框）显示在image div的下面。

以下CSS应注意您的布局

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

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

HTML:

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

JSFIDDLE：

---

所以，你想要：

[img][………]内容………]

？准确地说！（这比我制作的要容易得多）有时图像可以有不同的大小（我可以在图像中留一些空白并浮动，但我想知道是否有一种不太“黑”的方式。所以更像是

[img][…content….]
[…img….[…content…]

要使它们都可以调整大小，最简单的方法是让服务器根据图像的宽度生成数字，并将其作为内联样式添加。在保持跨浏览器兼容性的同时，两个相邻的水平自动调整大小部分可能很难做到。您的方法比以前的方法复杂一些低。复杂？-顺便说一句，如果你不是一个讨厌桌子的人（我碰巧是BTW），一张桌子可以让这个工作。这实际上是我做的，除了一个不同。因为img可以是不同的大小（由我选择）（这很糟糕，因为我想要一个动态的解决方案），我只是做了。text.img50（然后使边距左70像素）我希望有一个不需要静态值的非javascript动态解决方案。