Div宽度100％减去固定的像素量 [英] Div width 100% minus fixed amount of pixels

问题描述

如何在不使用表格或JavaScript的情况下实现以下结构？白色边框代表div的边缘，与问题无关。

中间区域的大小会有所不同，但它会有准确的像素值，整个结构应该缩放根据这些值。为了简化它，我需要一种方法来设置100％ - n px宽度到顶部中间和底部中间的div。

一个干净的跨浏览器解决方案，但如果不可能，CSS黑客会做。

这是一个奖金。另一个结构，我一直在努力，最终使用表或JavaScript。它略有不同，但引入了新的问题。我一直主要在基于jQuery的窗口系统中使用它，但我想保留布局的脚本，只控制一个元素（中间一个）的大小。

解决方案

您可以使用嵌套元素和填充来获得工具栏上的左右边缘。 div 元素的默认宽度为 auto ，表示它使用可用宽度。然后，您可以向元素添加填充，它仍然保持在可用宽度内。

这里是一个例子，您可以使用将图像放置为左右圆角，

HTML：

 < div class =Header> 
< div> 
< div>这是动态中心区域< / div> 
< / div> 
< / div> 
  

CSS：

  .Header {
 background：url（left.gif）no-repeat; 
 padding-left：30px; 
} 
 .Header div {
 background：url（right.gif）top right no-repeat; 
 padding-right：30px; 
} 
 .Header div div {
 background：url（center.gif）repeat-x; 
 padding：0; 
 height：30px; 
} 
  

How can I achieve the following structure without using tables or JavaScript? The white borders represent edges of divs and aren't relevant to the question.

The size of the area in the middle is going to vary, but it will have exact pixel values and the whole structure should scale according to those values. To simplify it, I'd need a way to set "100% - n px" width to the top-middle and bottom-middle divs.

I'd appreciate a clean cross-browser solution, but in case it's not possible, CSS hacks will do.

Here's a bonus. Another structure I've been struggling with and end up using tables or JavaScript. It's slightly different, but introduces new problems. I've been mainly using it in jQuery-based windowing system, but I'd like to keep the layout out of the script and only control the size of one element (the middle one).

解决方案

You can use nested elements and padding to get a left and right edge on the toolbar. The default width of a div element is auto, which means that it uses the available width. You can then add padding to the element and it still keeps within the available width.

Here is an example that you can use for putting images as left and right rounded corners, and a center image that repeats between them.

The HTML:

<div class="Header">
   <div>
      <div>This is the dynamic center area</div>
   </div>
</div>

The CSS:

.Header {
   background: url(left.gif) no-repeat;
   padding-left: 30px;
}
.Header div {
   background: url(right.gif) top right no-repeat;
   padding-right: 30px;
}
.Header div div {
   background: url(center.gif) repeat-x;
   padding: 0;
   height: 30px;
}

这篇关于Div宽度100％减去固定的像素量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！