如何包装和设置CSS属性以实现描述的结果？

我正在开发，在一个视图有三个面板的Web应用程序的图像显示：如何包装和设置CSS属性以实现描述的结果？

enter image description here

你应该使用哪个CSS属性有底部面板得到相同的宽度上两个面板在动态环境中结合？

编辑：对不起，我应该提到，我不能使用任何javascript。我需要一个纯粹由CSS执行的解决方案。该标记是从我正在开发应用程序的Java代码生成的，因此我无法直接访问该代码。

来源

2012-02-14 AndroidHustle

使用JavaScript或jQuery的 – Hadas 2012-02-14 12:41:07

这是脆弱的！这是很难解释的。我有很多想法来处理这种场景，但我们无法解释，我们无法为您创建布局。 – Murtaza 2012-02-14 12:42:24

您刚编辑过您的标记无法更改。你可以请张贴你的确切标记吗？如果某些要求未得到满足，也许你的布局是不可能的。 – Zeta 2012-02-14 13:12:59

了解display:inline-block; ，float,position等显示和定位选项的属性。我只是猜想有一个像包装的东西。

HTML：

<div id="wrapper"> 
    <div id="firstPanel">First panel <br/>width: 300px</div> 
    <div id="secondPanel"> 
     Second panel <br/> width: > 300px, thus min-width:300px; 
    </div> 
    <div id="thirdPanel"> 
     Third panel. <br/> width: First panel + second panel + margin(?) 
    </div> 
</div>

CSS：

#wrapper{ 
    display:inline-block; 
    /* a block element will take all width, so you have to use a specific width, 
    a floating or an inline element.*/ 
} 
#wrapper > div{ /* just for convenience */ 
    border:1px solid #000; 
    border-radius:3px; 
    margin:.2em; 
} 
#firstPanel, #secondPanel{ 
    /* to show both in the same row. float:left is also possible */ 
    display:inline-block; 
} 
#firstPanel{width:300px;} 
#secondPanel{min-width:300px;} 

/* if you use float:left above, you have to use */ 
#thirdPanel{clear:both;}

Demo

来源

2012-02-14 13:09:50 Zeta

我一直在寻找，忘记了'inline-block'。很好的答案。 – 2012-02-14 13:17:20

我从演示中看到，这绝对是生成我之后布局的正确答案。不幸的是，由于框架中的“限制”，我无法将其应用到我的环境中。我已经足够长时间地解决了这个问题（延续了两周），我看不到适合我需求的答案，我将不得不以另一种方式来做。我感谢你的努力。 – AndroidHustle 2012-02-14 13:36:53

-1

让你的第二个面板的宽度和你的第一个面板的固定宽度的增加，并将其应用到你的第三个DIV

var secondPanel = $('.secondPanel').width(); 
secondPanel = parseInt(secondPanel.substr(0,secondPanel.length-2)); 
secondPanel = secondPanel + 300; 
$('.thirdPanel').css('width',secondPanel);

试试这个代码，它使用jQuery

来源

2012-02-14 12:52:52

这个问题被标记为[tag：css]，OP也表示他希望使用CSS，而不是JavaScript。“我想用我的徒手杀死一个人，教我空手道！”〜 “使用枪” – 2012-02-14 13:02:45

@palsingh感谢Pal的回答。对不起，我忘记提到我无法使用JavaScript，我需要一个纯粹由CSS执行的解决方案。 – AndroidHustle 2012-02-14 13:02:56

@Truth喜欢比喻.. =） – AndroidHustle 2012-02-14 13:05:22

如何包装和设置CSS属性以实现描述的结果？

回答

相关问题