设置DIV全宽和修复

我想设置div#divcontainerdata，以适应使用CSS屏幕的整个宽度。设置DIV全宽和修复

我简单的HTML是：

<div class="container"> 
    <div class="leftDiv2" style="width:300px;float: left;"></div> 
    <div class="leftDiv1" style="width:300px;float: left;"></div> 
    <div class="divcontainerdata"></div> 
</div>

我想最终的产品看起来像这样：

|    |     | 
| div:leftdiv1 | divcontainerdata | 
|    |     | 
| div:leftdiv1 |     |

我怎样才能做到这一点？

来源

2012-07-23 MANISHDAN LANGA

使用宽度：100％; – 2012-07-23 13:32:23

谢谢，但我需要左div的导航栏也是300px – 2012-07-23 13:33:12

你能准确地告诉我们你需要什么吗？ – 2012-07-23 13:33:58

将设置为前两个div，然后为第三个div设置margin-left: 300px。

.leftDiv1, .leftDiv2 { 
    width: 300px; 
    float: left; 
    clear: left; 
} 

.divcontainerdata { 
    margin-left: 300px; /* the width of the floated divs */ 
}

Demo

来源

2012-07-23 13:36:28 Ana

为什么要留余量？ – 2012-07-23 13:47:35

因此它不会包裹在浮动的div下面。 – Ana 2012-07-23 13:48:04

感谢它为我的作品 – 2012-07-23 13:50:47

Here

此外，这是很好的做法，导入CSS文件，而不是使用内嵌样式。我已经相应地修改了您的代码。

HTML

<div class="container"> 
      <div class="leftDiv2"> 
     </div> 
      <div class="leftDiv1"> 
     </div> 
      <div class="divcontainerdata"> 
     </div> 
</div>

CSS

div { 
    height: 100px; /*optional*/ 
} 

.leftDiv1 { 
    background-color: red; /*optional*/ 
    clear: left; 
    float: left; 
    width: 300px; 
} 

.leftDiv2 { 
    background-color: blue; /*optional*/ 
    clear:left; 
    float: left; 
    width: 300px; 
} 

.divcontainerdata { 
    background-color: yellow; /*optional*/ 
    width: 100%; 
    margin-left: 300px; /*margin-left = width of leftDiv1, leftDiv2*/ 
}

来源

2012-07-23 13:38:47 abhshkdz

<style>  
    #left { 
    border: 1px solid #000000; /* Delete it */ 

    float: left; 

    width: 300px; 
    } 

    #content { 
    width: 100%; 
    border: none; 
    } 
</style> 

<div id="container"> 
    <div id="left"> 
    <div id="left_1"> 
     Left 1 
    </div> 
    <div id="left_2"> 
     Left 2 
    </div> 
    </div> 
    <div id="content"> 
    Content 
    </div> 
</div>

来源

2012-07-23 13:51:43 FabianoLothor

HTML

<div class="container"> 
    <div class="leftDiv2">div:leftdiv1</div> 
    <div class="leftDiv1">div:leftdiv1</div> 
    <div class="divcontainerdata">divcontainerdata</div> 
</div>

CSS

.leftDiv1, .leftDiv2{ 
    clear:left; 
    width:300px; 
    float: left; 
    border:solid black 1px; 
    margin:2px; 
} 
.divcontainerdata{ 
    border:solid black 1px; 
    margin:2px; 
    display:inline-block; 
}

DEMO。

来源

2012-07-23 13:57:25

设置DIV全宽和修复

回答

相关问题