[英]Simple CSS problem, 100% width
<div style="width:100%;border:1px solid green">
<div style="float:left">
<img src="images/logo.gif" />
</div>
<div style="float:left;border:1px solid black;">
lol
</div>
<div style="clear:both">
</div>
</div>
The lol is in a box that is small, I need it to fill up the remaining space in the container! 哈哈在一个很小的盒子里,我需要它来填补容器中的剩余空间!
因为它是浮动的,所以需要给它一个宽度。
This works (at least in Safari), but I don't know if it's an acceptable answer for you, since it modifies the position of the div
tags: 这有效(至少在Safari中有效),但是我不知道这是否对您来说是可以接受的答案,因为它修改了
div
标签的位置:
<div style="width:100%;border:1px solid green">
<div style="float:left;border:1px solid black; width: 100%;">
<div style="float:left">
<img src="..." />
</div>
lol
</div>
<div style="clear:both">
</div>
</div>
There is sadly no possibility in CSS to say 遗憾的是,CSS中不可能说
width: 100% - 100px;
but what you can do is the following: 但是您可以执行以下操作:
<div>
<div style="float:left;width:100px;">
<img ... />
</div>
<div style="margin-left:100px;">
lol rofl xd whatever
</div>
</div>
This will give you the image at the left with it's column fixed to 100px and a flexible column at the right. 这将为您提供左侧的图像,其列固定为100px,右侧为灵活的列。 You just cannot use it with a flexible image column ;(
您只是不能将其与灵活的图像列一起使用;(
If you just need one div
to share the same space, then see if this will work for you: http://jsfiddle.net/vVQK2/ 如果您只需要一个
div
共享相同的空间,那么看看这是否对您有用 : http : //jsfiddle.net/vVQK2/
You simply float the logo to the left, and don't do anything to the other one. 您只需将徽标向左浮动,而对另一个则不做任何事情。
#outer {
width: 500px;
overflow: hidden;
}
#logo {
float: left;
width: 100px;
height: 100px;
margin-right: 20px;
}
It's not possible the best solution but it works, use tables: 不可能是最好的解决方案,但是可以使用表:
<table width="100%">
<tr>
<td>
<img>
</td>
<td>
More
</td>
</tr>
</table>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.