Question

我有以下代码：

<html>
    <body>
        <div id="left" style="height:30%;background-color: cyan;">           
        </div>
        <div id="right" style="height:30%;background-color: yellow">
            <a style="padding: 3em;margin: 3em;" >test</a>
        </div>
    </body>
</html>

如何将div（id = left）拉伸到100％但除了div的宽度（id = right）。我的意思是左div宽度+右div宽度必须等于窗口的100％。

Answer 1

在HTML中切换它们，首先放置#right，然后#left。

将float添加到#right，它将具有其内容的宽度，#left将窗口宽度的其余部分作为宽度。

<style>
#right {float: right;}
#left {overflow: hidden}
</style>

<div id="right" style="height:30%;background-color: yellow">
    <a style="padding: 3em;margin: 3em;" >test</a>
</div>

<div id="left" style="height:30%;background-color: cyan;">xxx</div>

http://jsfiddle.net/9nqme599/2/

Answer 2

 <html>
     <body>
         <div id="left" style="height:30%;background-color: cyan;">           
         </div>
         <div id="right" style="height:30%;background-color: yellow;float: right;">
             <a style="padding: 3em;margin: 3em;" >test</a>
         </div>
     </body>
 </html>

CSS：除了一些流体部分之外，将div拉伸到100％

2 个答案: