这可能很难用英语描述。我想要一个图像(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。
答案 0 :(得分: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/
答案 1 :(得分:0)
以下CSS应该处理您的布局。
.img{width:50px; float: left; clear: none;}
.content{width: auto; margin-left: 50px; float: none;}
您可以根据需要添加其他样式。图像不会显示在DIV内部。 :)