CSS布局 - 动态宽度DIV [英] CSS Layout - Dynamic width DIV

问题描述

我有一个很常见的布局问题，我传统上使用一个表来解决，但想要一些建议，使用CSS。我有3个图像组成一个'容器'。左图像和右图像通常只是使用标签显示，中心图像显示为一个背景图像，我的内容，它的内容，所以内容似乎在容器中我相信你见过/使用此百万次：

 < table width =100cellpadding =0>< tr& 
< td width =50>< img src =myleftimage/>< / td> 
< td style =background：url（'mymiddleimage'）; >内容在这里...< / td> 
< td width =50>< img src =myrightimage/>< / td> 
< / tr>< / table> 
  

这样做的好处是，浏览器（或父级）的宽度和中间列，其中内容动态地调整大小以占据左/右图像之间的剩余空间。

我想要什么这样的东西像这样：

 < div style = float：left; width：100％> 
< div style =width：50px; float：left;>< img src =myleftimage/>< / div> 
< div style =background：url（'mymiddleimage'）; float：left; width：???> Content goes here ...< / div> 
< div style =width：50px; float：left;>< img src =myrightimage/>< / div> 
< / div> 
   
 
这对中间的div是有效的接受 - 我设置宽度现在我可以硬编码为92％等，但是想要我想要的是
解决方案
尝试
 < div style =width：100％;> 
< div style =width：50px; float：left;>< img src =myleftimage/>< / div> 
< div style =width：50px; float：right;>< img src =myrightimage/>< / div> 
< div style =display： margin-left：auto; margin-right：auto;>内容在这里< / div> 
< / div> 
  
 
 $ b b 
或
 < div style =width：100％; border：2px solid #dadada;> 
< div style =width：50px; float：left;>< img src =myleftimage/>< / div> 
< div style =width：50px; float：right;>< img src =myrightimage/>< / div> 
< div style =display： margin-left：auto; margin-right：auto;>内容在这里< / div> 
< div style =clear：both>< / div> 
< / div> 
  
 
I have a pretty common layout issue that I have traditionally used a table to solve, but would like some advice on getting it done with CSS. I have 3 images that makeup a 'container'. The left and right images are usually just shown using  tags, and the center image is displayed as a 'background-image" with  my content over it, so that the content appears to be in the container. I'm sure you've seen/used this a million times:
<table width="100" cellpadding="0"><tr>
<td width="50"><img src="myleftimage" /></td>
<td style="background: url('mymiddleimage');">Content goes here...</td>
<td width="50"><img src="myrightimage" /></td>
</tr></table> 
The nice thing about this is that the width of the table is always the width of the browser (or parent) and the middle column where the content is dynamically sizes to take up the remaining space between the left/right images.

What I want to is recreate this using CSS, with as little hard coded info as possible. So something like this:
<div style="float:left; width:100%">
  <div style="width: 50px;float:left;"><img src="myleftimage" /></div>
  <div style="background: url('mymiddleimage');float:left;width:???">Content goes here...</div>
  <div style="width: 50px;float:left;"><img src="myrightimage" /></div>
</div>
This works great accept for the middle div -how do I set the width? Right now I can hard-code it to be, say, 92%, etc. But want I want is for it to auto-fill the space. Can it be done using only CSS?
解决方案
try
<div style="width:100%;">
    <div style="width:50px; float: left;"><img src="myleftimage" /></div>
    <div style="width:50px; float: right;"><img src="myrightimage" /></div>
    <div style="display:block; margin-left:auto; margin-right: auto;">Content Goes Here</div>
</div>
or
<div style="width:100%; border:2px solid #dadada;">
    <div style="width:50px; float: left;"><img src="myleftimage" /></div>
    <div style="width:50px; float: right;"><img src="myrightimage" /></div>
    <div style="display:block; margin-left:auto; margin-right: auto;">Content Goes Here</div>
<div style="clear:both"></div>    
</div>


                        
这篇关于CSS布局 - 动态宽度DIV的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！